How to spread scss files across multiple packages?


I want to create multiple packages which contain different templates. Each template has its own scss-file. In the top level scss-file I have defined some variables (e.g. $base-background-color) on which other template.scss-files depend on. How can I make sure that everything is loaded in the right order and has access to the previously defined variabels?


Packages are inherently considered to be separated from the application. As far as I am aware, there is no explicit way of controlling what the package has access to from the application. At this time packages can access the entire consuming application without any explicit way of the application telling what it has access to.

I would instead go for this structure, almost identical to yours but it doesn’t use packages.

  / component-name.html
  / component-name.scss
  / component-name.js

You can always just use import statements at the top of all of your .scss files to import all your variables. But if you’re using the fourseven:scss package then it has a neat little feature that basically gives you what you’re asking for. Being able to control which scss files get loaded first and then the rest can automatically be loaded.

For example if you want your global styles and few variables files loaded before anything else. While the rest of your .scss files that are within component directories can be loaded after those files and the order in which they are loaded shouldn’t really matter. All of those .scss files would have access to the variable file. The variable files/global styles can be listed in a index.scss file. The rest of your .scss files will automatically be appended to that index.scss file.

The feature is described here: