javascript - Gruntfile.js - 如何使用 recess 和覆盖 bootstrap 变量？

Question

我正在尝试设置 grunt-recess 以包含带有覆盖变量的 Twitter Bootstrap...

这是我的 Gruntfile.js :

'use strict';

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        recess: {
            plugins: {
                options: {
                    compile: true,
                    compress: true
                },
                files: {
                    'public/css/plugins.css': [
                        'packages/bootstrap/less/bootstrap.less',
                        'packages/font-awesome/less/font-awesome.less',
                        'assets/less/my-variables.less',
                        // and more...
                    ]
                }
            }, // plugins
        },
    });

    // ...you know
};

在这种情况下，不使用“my-variables.less”...现在，我用自己的小手将其添加到“packages/bootstrap/less/bootstrap.less”中。

显然，这不是一个好的做法。

有人能告诉我如何使用 grunt 覆盖 Bootstrap 变量而无需实际编辑 Bootstrap 包吗？

Answer 1

我的建议是为您创建“公共(public)/自定义”文件夹，减少覆盖文件。

包含以下文件“custom-bootstrap.less”、“custom-other.less”、“custom-variables.less” "在自定义文件夹中。

在“custom-bootstrap.less”文件中包含以下导入

@import "../less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../less/utilities.less";

然后在你的 grunt 文件中做类似的事情

recess: {
  options: {
    compile: true
  },
  custom_bootstrap: {
    src: ['custom/custom-bootstrap.less'],
    dest: 'dist/css/custom-<%= pkg.name %>.css'
  }
}

然后您只需在您的项目中包含“custom-bootstrap.css”，这将覆盖任何现有样式。

这article来自 smashing 杂志的文章很好地解释了自定义 Bootstrap 。

注意相对路径，并确保它们指向基于您项目的较少文件。这是基于 Bootstrap 版本 3.0.3 的结构。