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

Question

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

Navigation

#1 by (1 votes)

0

I'm 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 foo.component.scss file I'm trying to access the _variables.scss file to get a variable that contains a default color for the project. To do this, I'm 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 creating a reference in config files, or some other configuration?

angular scss

asked by anonymous 02.09.2018 / 04:07

1 answer

MVC CodeIgniter JavaScript Clock increase for game

score 1 · Accepted Answer

Have you already defined the Angular project as sass?

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

ng set defaults.styleExt scss

Check out your config looks like this:

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