Meteor Sass uses basic sass from deeper files

Question

I have a Meteor project with the following file structure:

.meteor client dashboard dashboard.scss client.scss 

My main sass file is client.scss, which is located in the client folder.

If I define $ flat-button in client.scss. Then I can not use it in dashboard.css without adding import '../client'; . However, when I do this in multiple files, this leads to duplicate entries in the combined css file. If I do not import it, Meteor reports errors due to the fact that it did not find the variable.

Should I add settings to the sass compiler to make this work?

Answer 1

If you use the fourseven:scss to compile Sass in your Meteor project, you just need to prefix the file name of your imported .scss files with an underscore, which is the standard method for naming a partial style sheet using Sass .

In your case, your folder and file structure should be changed to:

 .meteor client dashboard _dashboard.scss client.scss 

And then you should be able to use the @import operator to include _dashboard.scss in client.scss , for example:

 @import 'dashboard' 

If for some reason you do not want to rename files this way, you can also use the .scssimport extension for the same result.

Hope this helps!