简体   繁体   English

Bootstrap-Sass使用Grunt

[英]Bootstrap-Sass using Grunt

I have installed bootstrap using sass, however my scss files are not compiling to the css folder. 我已经使用sass安装了bootstrap,但是我的scss文件没有编译到css文件夹中。

I was able to install the bootstrap, using bower. 我能够使用Bower安装引导程序。 This is my gruntfile.js 这是我的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']);
}

I would like to know, what step I am missing, because I have followed the directory paths correctly. 我想知道,我缺少什么步骤,因为我正确地遵循了目录路径。 My config.rb file, I have changed the sass directory to stylesheets. 我的config.rb文件将sass目录更改为样式表。

When I run, sudo grunt, no errors are found but the stylesheet is not compiling. 当我运行sudo grunt时,未发现任何错误,但样式表未编译。

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

This also applies to grunt-sass. 这也适用于咕unt声。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM