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

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

包含以下文件“ 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解释了自定义引导程序。

小心相对路径并确保它们根据您的项目指向较少的文件。这个结构基于bootstrap 3.0.3版。

Gruntfile.js - 如何使用凹进和覆盖引导变量？

1 个答案: