Question

默认情况下，Grunt将bootstrap.less编译为bootstrap.css。问题是如何让它编译我的自定义样式。无论我要将所有Bootstrap较少的文件和我自己的一些文件导入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的变量和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',。

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

1 个答案: