Question

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

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

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

如何捆绑索引文件？我曾经使用regexp连接所有文件并删除重复的@import "variables";行，也许还有一个用于执行此操作的Less 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运行bundler.js，它将创建一个包含所有样式的bundle.less文件。

// bundle.less
@red: #ff0000;
@grey: #cccccc;

.btn-danger {
     background: @color;
}

input[type='checkbox'] {
   background: @grey;
}

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

1 个答案: