import of SASS partials in Angular2 components

Question

I am using SASS for designing my website and have developed some partials in separate file say _partials.scss. Now I want to use these variables and mixins in my scss files of various components. So I imported this scss to styles.scss file which is present inside the \src folder. But the mixins & variables are not available to each of the component level scss files.

So, next I import these partials to each of the component scss files. This works fine. But is this a good approach to import the partials in all the component stylesheets? What can be a better solution to this?

P.S. I am using Angular CLI and webpack. Angular 2 version 2.3.0

Thanks!

Answer 1

This is a good approach. Every .scss file in your project should know it's dependencies, that's why the @import is always good.

What you can improve is adding the partials to the includePaths (if you use node-sass), that you can directly use @import 'partials'; instead of @import '../../my/long/path/to/partials'; or do the styles as a single file (not component level styles).