Global SCSS Mixin-s And Var-s Not Accessible In Components

[erickbrenesLT]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am thinking this is a Webpack or angular.json thing possibly. Found a lot of questions on this without a true answer. Besides to @import the mixin directly in the component and the used @import variables in the mixin file, which just seems silly to me and not ideal. I get that components are encapsulated, but you can access global styles... why not scss mixins? So, how do you get global mixins and access them in a component - without importing them directly into the component's scss file?

I created a _mixins.scss file under the theme folder. Also, in the folder I imported the mixin file in the custom.scss file. Then in the main styles.scss the custom.scss gets imported. Then inside of an angular component I use the @include to pull in the mixin, but get an error. I also have in the angular.json file the styles file marked there so it should be globally available.

I've also tried switching to @use and @import the mixin directly into the styles.scss = no dice.

My Stackoverflow question: https://stackoverflow.com/questions/76068047/why-is-my-custom-angular-scss-import-failing
Similar stackoverflow question with link to example: Angular not importing mixin

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  ╷
7 │     @include card-hover-effect();

Mixin code:

@mixin card-hover-effect() {
  transition: all 0.3s;
  &:hover {
    cursor: pointer;
    transform: scale(1.02);
    box-shadow: $card-box-shadow;
  }
}

Minimal Reproduction

1. Create an Angular Project
2. Create a _mixin.scss file
3. Import the mixin file in the globally used styles.scss file
4. Make a component and in the component's scss file use the @include 'name of mixin';
5. Make sure that the angular.json includes

"styles": ["src/styles.scss"],
            "stylePreprocessorOptions": {
              "includePaths": [
                "location of "
              ]
            },

Exception or Error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  ╷
7 │     @include card-hover-effect();

Your Environment

Angular CLI: 15.2.4
Node: 16.1.0
Package Manager: npm 7.11.2
OS: darwin x64

Angular: 15.2.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.4
@angular-devkit/build-angular   15.2.4
@angular-devkit/core            15.2.4
@angular-devkit/schematics      15.2.4
@schematics/angular             15.2.4
rxjs                            7.8.0
typescript                      4.9.5

Anything else relevant?

No response

[alan-agius4]

HI @erickbrenesLT,

This is working as intended.

Mixins and global styles are two very different concepts. One is runtime and the other is build time. Global styles are only available during runtime on the browser by referencing the CSS via a link tag, on the other hand mixins are a Sass "function" and build time concept which do not exist on the browser.

Since each component stylesheet is compiled as a separate stylesheet, these do not have context of what was referenced in styles.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.}