Is there some way to make SASS/SCSS variables accessible without importing them in every component using Angular-CLI

Question

I'm working on some project with a lot of components. Just now I'm thinking about using SASS variables, but it could be annoying to import the variable into each existing component. Maybe someone knows is there any way to make SASS variables accessible in all *.scss files in the project without importing them.

Answer 1

As of now answer to your question is 'NO'. We have to import variables & mixins files in each of your component sass file.

angular-cli does provide configuration to Add paths/includePaths functionality for sass. For that we have to add following config under app property.

"stylePreprocessorOptions": {
  "includePaths": [
    "style-paths"
  ]
}

Using above configuration at least we can directly include file by file name, skipping relative path like follows

@import 'variables';

For reference see #3700 & documentation on global-styles.