Global scss not working.

[RayLuxembourg]

So I have styles.scss that import list of style from my scss folder.
The Issue happens when I try to use variables or mixins that are defined and Imported inside my styles.scss.
`// GLOBALS

@import 'scss/index';`

I get this error

ERROR in ./src/app/navigation/navigation.component.scss
Module build failed:
@include shadow-1;
^
No mixin named shadow-1

I can solve this only If import the styles.scss directly to the component.scss.
Importing the global scss to all components every time is weird.
also tried to add the same scss to the app[0].styles array
please help.

[bobrosoft]

Have same issue and that's uncomfortable. In Angular 1 I had set up only one scss file compiled which includes all the stuff in right order, but here every component's style compiled separately. That's possibly because of per-component-style-scoping.

[clydin]

The global style files are essentially in a different context and only the final output css is available for use by the components. You'll need to import all of your variables and mixins into each of your components.

[filipesilva]

@clydin is correct.

[saiyaff]

The global style files are essentially in a different context and only the final output css is available for use by the components.
Does that mean global scss files will get compiled?
@clydin
I am using a global.scss and it is also not getting compiles. It's in an angular-cli project

[ahmed-musallam]

I am new to sass, but @clydin wouldn't that produce duplicate css? if I include the same sass in different components, I get duplicate css of that @include right?
in the produces final css files that is..

[Albejr]

In my case (Angular 7):

angular.json

"projects": {
    "MyProject": {
      "sourceRoot": "src"
}}

styles.scss
@import "assets/css/variables.scss";

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}