将许多 LESS 文件捆绑到一个 LESS 文件中

Question

我正在制作一个包含一些通用UI组件的库，某种Bootstrap。假设我有以下 LESS 文件结构：

button.less
checkbox.less
index.less
variables.less

每个组件样式文件都有@import "variables.less"; .索引文件导入所有组件文件。现在我想将 library.less 和 variables.less 文件分发到一个包中。

如何捆绑索引文件？我曾经使用正则表达式连接所有文件并删除重复@import "variables";行，也许有一个更少的 API 可以做到这一点。

Answer 1

您可以使用less-bundle https://www.npmjs.com/package/less-bundle

// variables.less
@red: #ff0000;
@grey: #cccccc;
// button.less
@import 'variables.less';
.btn-danger {
     background: @color;
}
// checkbox.less
@import 'variables.less';
input[type='checkbox'] {
   background: @grey;
}
// index.less
@import 'button.less';
@import 'checkbox.less';

这是执行此操作的主要代码。

// bundler.js
const path = require('path')
const bundle = require('less-bundle');
const srcFile = path.join(__dirname, './index.less');
bundle({
  src: srcFile,
  dest: path.join(__dirname, './bundle.less')
}, function (err, data) {
  console.log('Error Bundle', err, data);
});

使用命令node bundler.js运行捆绑器.js它将创建一个包含所有样式的bundle.less文件。

// bundle.less
@red: #ff0000;
@grey: #cccccc;
.btn-danger {
     background: @color;
}
input[type='checkbox'] {
   background: @grey;
}