Bootstrap-Sass使用Grunt

最后发布: 2015-09-26 13:21:12


问题

我已经使用sass安装了bootstrap,但是我的scss文件没有编译到css文件夹中。

我能够使用Bower安装引导程序。 这是我的gruntfile.js

/*jslint node: true */
module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
        options: {
            loadPath: ['./bower_components/bootstrap-sass/assets/stylesheets']
        },
        dist: {
            options: {
                outputStyle: 'expanded',
                sourceMap: false
            },
            files: {
                'css/bootstrap.css' : 'stylesheets/_bootstrap.scss',
            }
        }
    }, // sass

    compass: {
        dev: {
            options: {
                config: 'config.rb'
            }
        } // dev
    }, //compass

    watch: {
        options: {
            livereload: true,
            dateFormat: function(time) {
                    grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
                    grunt.log.writeln('Waiting for more changes...');
                } //date format function
        }, //options
        scripts: {
            files: ['*.js']
        }, // scripts
        //Live Reload of SASS
        sass: {
            files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
            tasks: ['sass']
        }, //sass
        css: {
            files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
            tasks: ['compass']
        },
        html: {
            files: ['*.html']
        }
    }, //watch

    postcss: {
        options: {
            processors: [
                require('autoprefixer-core')({
                    browsers: 'last 2 versions'
                })
            ]
        }
    }, //post css

    jshint: {
        options: {
            reporter: require('jshint-stylish')
        },
        target: ['*.js', 'js/*.js']
    } //jshint
});

grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build', 'watch', 'compass', 'jshint']);
}

我想知道,我缺少什么步骤,因为我正确地遵循了目录路径。 我的config.rb文件将sass目录更改为样式表。

当我运行sudo grunt时,未发现任何错误,但样式表未编译。

css twitter-bootstrap sass gruntjs compass-sass
回答

在SCSS中,通常会忽略以_ (下划线)开头的文件。 请参阅: http : //sass-lang.com/documentation/file.SASS_REFERENCE.html#partials

这也适用于咕unt声。