2

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.

Kamilius
  • 588
  • 14
  • 34
  • Have you tried removing url() so that you get `@import "bootstrap.css;"`? I only import ".scss"-files like this: `@import "bootstrap";` – KnutSv Oct 30 '14 at 13:38
  • @import url(...); is css from output file. The thing is, that SASS extends css default import functionality by the rules, which you can find in reference above. – Kamilius Oct 30 '14 at 13:49
  • 5
    I see, if you had used the `scss` formatting you could have just changed the format of bootstrap to `bootstrap.scss` and imported with `@import "bootstrap";` since vanilla CSS is valid SCSS. Basically you have three choices; 1. rewrite bootstrap with sass syntax, 2. change sass-file to scss syntax, or 3. render sass individually and merge with bootstrap via another grunt extension. – KnutSv Oct 30 '14 at 21:34
  • I see, thank you. I shall just find some extension like 'concat' or similar. – Kamilius Oct 31 '14 at 06:50

1 Answers1

0

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.

marnusw
  • 855
  • 1
  • 9
  • 18