Question

我已经安装了bootstrap-sass和grunt-sass，并希望自定义构建中包含的引导程序组件。

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

我已经尝试在我的_bootstrap.scss文件中包含Bootstrap partials的完整路径，但是这不会编译。 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'
        }]
      }
    },

Answer 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文件所在的子目录（部分）中，然后在_main.scss下方导入_bootstrap.scss。< / p>

这样我可以通过编辑_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扩展程序和应用程序，您将在所有文件中获得实时更新。

迟了几个月..但希望这有帮助！

使用grunt-sass自定义Bootstrap路径

1 个答案: