SCSS compiling is not ignoring my partials

[sharpmachine]

When using node-sass via the Angular 2 CLI, if I have a file called _variables.scss, my expectation is that it will not compile to CSS, but it does. How can I set that to not do that?

OSX El Capitian

angular-cli: 0.0.34
node: 4.2.6
os: darwin x64

[jkuri]

For something that would be long-term solution; you can't. You can customize lib/broccoli/angular-brocolli-sass.js regex to exclude files that are prefixed with _, but will work only until you'll update angular-cli :-). We cannot know which files are you want to get compiled and which not so it compiles all files that have .scss extension.

[cladera]

Ignoring files prefixed with '_' is kind of a convention in sass so It would make a lot of sense to create an option we can pass to Angular2App constructor.

[sharpmachine]

Thanks @cladera. My understanding was also that files prefixed with '_' were ignored and not complied. Thanks for confirming that.

[BrunoAMSilva]

@cladera I agree, adding this configuration is the best option, doesn't hurt anyone and would avoid the pain of changing angular-bricolli-sass.js for every member of my team. 👍

@jkuri Is there any chance this feature could be added?

[griezma]

yes convention over configuration. sass specs are clear about it.

[apavillet]

for anyone struggling with this use this in angular-cli-build.js add this

"sassCompiler": {
"cacheExclude": [//_[^\/]+$/]
}

[sharpmachine]

@apavillet Where exactly? I just tried adding it inside the Angular2App(defaults) but it got massive errors.

[apavillet]

Here is the angular-cli-build i have

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist//*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata//.+(js|js.map)',
'rxjs/__/.+(js|js.map)',
'@angular//*.+(js|js.map)',
'moment//.+(js|js.map)',
'ng2-translate/__/.+(js|js.map)',
'ng2-bootstrap/*/.+(js|js.map)',
'angular2-moment/.+(js|js.map)',
'boosted//.+(js|css)',
'bootstrap//.+(js|css)',
'animate.css//.+(js|css)'
],
"sassCompiler": {
"cacheExclude": [//_[^\/]+$/]
}
});
};

SCSS is compiled fine, @sharpmachine

[sharpmachine]

@apavillet Now I don't get the errors but it still complied my new file prefixed with '_' to css.

[apavillet]

I'm not an expert on this kind of things but you should make sure you have the latest version, since the PR allowing this is quite recent

[sharpmachine]

Thanks @apavillet. I updated and now it's working.

[sharpmachine]

So the only problem now is saving a partial SCSS file doesn't trigger a recompile of the main SCSS file so I have to save both the partial and the main to see my changes.

[andyford]

There was a fix af9a4f9

I was having this problem with angular-cli 1.0.0-beta.8, but it's working fine after upgrading to 1.0.0-beta.9
(thanks to my colleague @kevinmerckx for pointing this out!)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}