Bootstrap-Sass使用Grunt

时间:2015-09-26 13:21:12

标签: css twitter-bootstrap sass gruntjs compass-sass

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

我能够使用凉亭安装引导程序。 这是我的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,没有找到错误,但样式表没有编译。

1 个答案:

答案 0 :(得分:0)

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

这也适用于grunt-sass。