使用gruntjs将CSS和SASS文件编译为单个CSS文件

Question

I have a bootstrap.css file which I want to compile with my custom styles from style.sass into single output file, for example - style.css. For sass compilation I use gruntjs with grunt-contrib-sass extension. My Gruntfile.js config for sass looks like this:

sass: {
    dist: {
        options: {
            //style: 'compressed',
            style: 'expanded',
            lineNumbers: true
        },
        files: {
            'build/styles/style.css': 'src/styles/style.sass'
        }
    }
}

I've tried to import bootstrap.css into sass file, but instead it only generates next code in output css (which is correct behavior http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import ):

@import url(bootstrap.css);

.....
/*my style.sass rules*/

I even tried to list multiple files in order of concatination and processing, like in uglifier settings:

files: {
    'build/styles/style.css': ['src/styles/bootstrap.css', 'src/styles/style.sass']
}

But this only adds bootstrap.css into final style.css file ignoring style.sass existence.

As I'm new in gruntjs, I can't figure out how this should be done properly.

Answer 1

The Grunt configuration is correct. The reason your file is not being imported is because of the way SASS is designed to work.

The SASS documentation states:

By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

• If the file's extension is .css.
• If the filename begins with http://.
• If the filename is a url().
• If the @import has any media queries.

Since the file you are importing has a .css extension it will therefore not be imported directly but remain a standard CSS @import .

You have three options to resolve this:

1. Rename the included file to _bootstrap.scss . (If you don't add the underscore a bootstrap.css will be created along with your main output file which is unnecessary.)
2. Include the Bootstrap SCSS source as a dependency of your project and build against that. Install the Bootstrap source using Bower by typing $ bower install bootstrap-sass-official in your project root folder. (For instructions on setting up Bower see the Bower website .) Then you can replace your import above with @import 'bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap'; .
3. Use a concatenation library such as grunt-contrib-concat to combine Bootstrap.css and your main style sheet during your build process.

This first option is fine if you downloaded the bootstrap CSS file into your project manually, however, if you are including it as a dependency with npm/bower it is not ideal.

I would recommend the second option since building Bootstrap from source will not only solve your problem but allow for customization of Bootstrap variables to fit your theme rather than overwriting them with subsequent style rules as well. The only downside is that your build process might be slightly longer due to the rather large SASS build of the Bootstrap source.