更改使用 Grunt 编译的 Bootstrap 输出 LESS 文件答案

【问题标题】：Change the Bootstrap output LESS file compiled with Grunt更改使用 Grunt 编译的 Bootstrap 输出 LESS 文件
【发布时间】：2014-12-08 06:52:50
【问题描述】：

默认情况下，Grunt 将 bootstrap.less 编译成 bootstrap.css。问题是如何让它编译我的自定义styles.less，我将在哪里将所有Bootstrapless文件以及我自己的一些文件导入styles.css？

【问题讨论】：

创建一个文件 my-theme.less（或其他），导入两个文件：bootstrap.less 和你的 styles.less——这是你编译的文件。
是的，但是如何选择输出文件？
>但是如何选择输出文件？ - 只需将其设置为Gruntfile.js。虽然修改 Bootstrap 包本身不是一个好主意（显然它可能会随着更多的 BS 版本而失效），但您最好使用自己的 Grunt 脚本创建自己的项目。

标签： twitter-bootstrap-3 gruntjs less

【解决方案1】：

认为这个问题有很多答案。我认为您应该遵循@seven-phases-max 的建议，并尽量不要修改源代码（或至少进行最小的更改）。

在您的 Gruntfile.js 中，您会发现两个 Less 编译参数（compileCore 和 compileTheme）：

less: {
  compileCore: {
    options: {
      strictMath: true,
      sourceMap: true,
      outputSourceFiles: true,
      sourceMapURL: '<%= pkg.name %>.css.map',
      sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
    },
    src: 'less/bootstrap.less',
    dest: 'dist/css/<%= pkg.name %>.css'
  },
  compileTheme: {
    options: {
      strictMath: true,
      sourceMap: true,
      outputSourceFiles: true,
      sourceMapURL: '<%= pkg.name %>-theme.css.map',
      sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
    },
    src: 'less/theme.less',
    dest: 'dist/css/<%= pkg.name %>-theme.css'
  }
}

并定义了以下任务：grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);

添加自己的子任务和编译参数应该很容易。这样做时，您可以将styles.less 编译成styles.css。请注意，您有一个单独的 CSS 文件作为结果。加载该文件需要额外的 http 请求。

除非您在 styles.less 中导入 bootstrap 的 Less 代码，否则您也不能重用 Bootstrap 的变量和 mixins。如果您需要一个单独的 CSS 文件，请考虑创建您的 styles.less，如下所示：

@import (reference) "bootstrap";
//your custom code here

如果您能够在一个 CSS 文件中编译所有代码，您可以执行以下操作：

创建一个文件custom.less 并在该文件中添加您的自定义。并将该文件保存在与 bootstrap.less 文件相同的文件夹中。
在 bootstrap.less 文件的末尾写入以下代码：@import "custom";

之后你就可以像往常一样编译bootstrap了。

或者创建 custom.less 如下：

 @import "bootstrap";
 //your custom code here

要默认编译 custom.less 而不是 bootstrap.less，你应该修改你的 Gruntfile.js。在CompileCore 参数中将src 选项更改为src: 'less/custom.less',。

【讨论】：