How to access the Styles.scss file from within an Angular component

Question

I am working with Angular (project generated by @angular/cli), and the structure of my project is below:

src
 | - app
      | - foo
           | - foo.component.js
           | - foo.component.scss
           | - foo.component.html
 | - styles
      | - _variables.scss

In my file foo.component.scss I’m trying to access the file _variables.scss to pick up a variable that contains a standard color for the project. To do this, I am using the structure below:

@import '~/.../src/styles/_variables.scss';

foo {
    background-color: $color-red;
}

Is there any simpler way to import this file into component style sheets? or by creating a reference in the config files, or some other configuration?

Answer 1

You have already defined the Angular project as Sass?

You can access your project folder, and type the following command.

ng set defaults.styleExt scss

Check your config is like this:

"defaults": {
  "styleExt": "scss",
  "component": {
  }
}