How to Prevent SASS from Merging Files Included via @Import

How to prevent SASS from merging files included via @import?

The docs for the @import rule says that:

All imported SCSS and Sass files will be merged together into a single CSS output file.

And explain that there is some 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.

The following rules will tell SASS to merge imported files:

@import "foo.scss";
@import "foo";

The following rules will tell SASS to NOT merge imported files:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@import with Sass not combining files

I got it to work by following this article:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

@import by default looks for a Sass file to import directly, but if the is a .css file or if the filename is a url it will compile to a CSS @import rule. Both of which were the case for me.

So my solution was to copy the css file I wanted to import & rename it rwd_styles.scss & changed my scss import rule to @import "rwd_styles.scss"; and it worked as I had hoped.

How NOT to combine all CSS into one file with SASS and bootstrap

What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!

but...

Since .sr-only and other are just provided as classes instead SASS mixins, you can't @include it, like you could do with the .transition mixin for example.

So, for the moment if you are using SASS, you have 2 options:

1. Import the Bootstrap module with the class you want to extend/reuse

   //contain the .sr-only definition
   @import "vendors/bootstrap/_scaffolding"; 
   @import "vendors/bootstrap/_variables";
   
   header .contentbox {
       @extend .sr-only;
   }
   

2. Copy/Paste the class from the Bootstrap source and extend it:

   @import "vendors/bootstrap/_variables";
   
   // Copy/Paste the .sr-only class to reuse, very un-DRY
   .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0 0 0 0);
     border: 0;
   }
   
   header .contentbox {
     @extend .sr-only;
   }
   

Gulp SASS - Use @import without compiling scss - css

I've stumbled upon the very same problem. This one is going to help You. Although has some flaws (forget about filenames prefixed with underscore - that's what i found till now).

the npm package that is build especially for this purpose

Disclaimer: I am not gonna explain how does the npm works, i assume author knows what is npm package if he wants to use gulp plugin. Please do not remove my answer just because i`m not unnecesarily explicitly describing what's obvious for
person that aked a question.
To prevent deletion of this answer as lacking context i'm quoting package description.

import resolve
resolve @import statements in stylesheets

What this does
What if you have some less or stylus files that you want to smash together into a master file, without compiling to css? Just use import-resolve and all your dreams will come true. All @import statements will be resolved and you'll be left with one file containing all your precious mixins, variables and declarations.

Using import-resolve

npm install import-resolve
// some-node-thing.js 
var importResolve = require('import-resolve');

// spits out a master dist file with all your wonderful stylesheet 
// things concatenated 
importResolve({
    "ext": "less",
    "pathToMain": "path/to/main.less",
    "output": "path/to/output.less"
});

// if you don't specify an output file, output accepts a callback parameter 
// and passes the concatenated file text 
var output = importResolve({
    "ext": "styl",
    "pathToMain": "path/to/main.styl"
}, function (output) {
    fs.writeFile('foo.styl', output, function (){
        console.log('did it myself.');
    });
});

---

Related Topics