将多个 LESS 文件捆绑到一个 LESS 文件中答案

【问题标题】：Bundle many LESS files into a single LESS file将多个 LESS 文件捆绑到一个 LESS 文件中
【发布时间】：2018-03-26 22:15:35
【问题描述】：

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

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

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

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

【问题讨论】：

不，Less 没有生成更少文件的工具。因此，对于这种事情，您只能靠自己。顺便说一句，没有理由删除多余的导入（除了使“包”更具可读性之外），因为同一文件的任何后续导入无论如何都没有效果（请参阅the docs）。

标签： css twitter-bootstrap gulp less gulp-less

【解决方案1】：

你可以使用less-bundlehttps://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;
}

【讨论】：

这应该是公认的答案，并解决了我的确切用例。