twitter-bootstrap-3 - 更改使用 Grunt 编译的 Bootstrap 输出 LESS 文件

Question

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

Answer 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 的变量和 mixin。如果您需要单独的 CSS 文件，请考虑按如下方式创建 styles.less:

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

如果您能够将所有代码编译到单个 CSS 文件中，则可以执行以下操作:

1. 创建一个文件 custom.less 并在该文件中添加您的自定义设置。并将该文件保存在与 bootstrap.less 文件相同的文件夹中。
2. 然后在 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',。