Meteor Sass using base sass from deeper files

Question

I've got a Meteor project with the following file structure:

.meteor
client
  dashboard
    dashboard.scss
  client.scss

My basic sass file is client.scss that resides in client folder.

If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.

Should I add settings to the sass compiler to get this working?

Answer 1

If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with 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 an @import statement to include _dashboard.scss in client.scss like so:

@import 'dashboard'

If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.

Hope that helps!