使用 grunt-sass 自定义引导路径答案

【问题标题】：Customising Bootstrap path with grunt-sass使用 grunt-sass 自定义引导路径
【发布时间】：2015-08-05 06:38:10
【问题描述】：

我已经安装了 bootstrap-sass 和 grunt-sass，并且想要自定义包含在我的构建中的引导组件。

我在 app/styles/ 文件夹中创建了 _bootstrap.scss 的副本，需要覆盖默认导入路径 - 我需要对 Gruntfile 进行哪些更改才能使其正常工作？

我已经尝试在我的 _bootstrap.scss 文件中包含 Bootstrap 部分的完整路径，但这无法编译。 Gruntfile 提取如下。

Gruntfile

// Compiles Sass to CSS and generates necessary files if requested
sass: {
    options: {
        sourceMap: true,
        sourceMapEmbed: true,
        sourceMapContents: true,
        includePaths: ['.']
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      }
    },

【问题讨论】：

不太清楚您要完成什么。你能把它分解成更小的部分吗？
我已经安装了 bootstrap-sass 但只想包含特定的组件。我不想修改包源，我想在我的项目中使用我自己版本的 _bootstrap.scss - 我可以设置加载路径吗？

标签： gruntjs bower bootstrap-sass

【解决方案1】：

这是我使用 Grunt 和 Bower 以及 Bootstrap 进行的自定义安装，包括/不包括可能对您有所帮助的引导组件。

设置好 Grunt 和 Bower 后，我使用 bower install boostrap-sass --save-dev 添加了 bootstrap-sass，以便更新我的 bower.json 文件。

修改引导

我将bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss 导入到我的styles.scss 文件中。

然后编辑_bootstrap.scss 注释掉我不想要或不需要的组件。

接下来，创建一个名为_main.scss 的文件并将其存储在我的styles.scss 文件所在的子目录（部分）中，然后在_bootstrap.scss 下方导入_main.scss。

这样，如果需要，我可以通过编辑_main.scss 使用我自己的自定义样式来覆盖引导程序。

这是我使用的starter grunt setup，它可能有助于解释文件结构。

Styles.scss 文件

// Bootstrap
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

// Custom styles
@import 'partials/main';

Gruntfile.js

module.exports = function(grunt){

    // Configure task(s)
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // setup uglify task
        uglify: {
            build: {
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.min.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'src/js/*.js']
                },
            },
            dev: {
                options: {
                    beautify: true,
                    mangle: false,
                    compress: false,
                    preserveComments: 'all'
                },
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js', 'src/js/*.js']
                },
            },
        },

        // setup watch task
        watch: {
            js: {
                files: ['bower_components/**/*.js', 'src/js/*.js'],
                tasks: ['uglify:dev']
            },
            css: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass:dev']
            },
        },

        // setup sass
        sass: {
            dev: {
                options: {
                     outputStyle: 'expanded'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
            build: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
        },
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

    // Register task(s)
    grunt.registerTask('default', ['uglify:dev','sass:dev']);
    grunt.registerTask('build', ['uglify:build', 'sass:build']);
};

从那里您应该能够添加自己的自定义引导样式和/或从引导中删除不需要的组件。然后只需运行grunt 或grunt build，具体取决于您是否需要开发输出（非缩小与否）。或 grunt watch 在您进行即时编译时进行编辑。添加livereload chrome 扩展程序和应用程序，您将获得所有文件的实时更新。

晚了几个月......但希望这会有所帮助！

【讨论】：