Angular import global style file fails

Question

I have an angular v20 project.

I have implemented a class "redborder" in "src/styles.scss" file and I am trying to @use the "redborder" class from a component style file but Angular can't find the global styles.scss file to import.

Example code below. I tried again on a newly created project. I can extend to "blackborder" class in the app.scss file and it is working okay. But when I try to extend to "redborder" class, I am getting this error. "Can't find stylesheet to import."

app.html

<div class="test">hello</div>

app.scss

@use "src/styles";

.blackborder {

    border: 1px solid red;

}

.test {

    @extend .redborder;
    @extend .blackborder;

}

src/styles.scss

.redborder {

    border: 1px solid red;

}

please share the minimal reproducible code, if possible a stackblitz with the issue happening — Naren Murali
– Naren Murali, Commented Nov 25 at 8:04
Added minimal code and extra explanation. The issue is reproducable on a new project also — Dml
– Dml, Commented Nov 25 at 11:16

Eliseo · Accepted Answer · 2025-11-25 12:27:16Z

2

You're using "relative path" so, e.g., if "styles.sccs" and "app.scss" are in the same folder:

@use "./styles";
//or
@use "styles";

(not include the src)

NOTE: In angular.json, you can see in "projects"--> "architect"-->"build"-->"styles" some like

"styles": ["src/styles.css"],

This "styles" is an array of files (see again that you use relative path, as angular.json is in the root, in this file you use "src/styles.css" and this styles will be global to all the application (it's not necesary include in each component.css using @use

stackblitz

edited Nov 25 at 12:27

answered Nov 25 at 11:48

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dml Nov 25 at 12:08

It is true that classes in styles.scss file are accessible in all html files. But I want to keep the html files clean and only extend on scss files. On the other hand, it appears to be that @use syntax is not working on absolute path, as in the first block

Eliseo Nov 25 at 12:25

I made a stackblitz with your code (using relative path) and work. BTW,

Dml Nov 26 at 8:02

Okay. I found a solution, though it is a bit of a rough solution. By the help of below. Answer is added. stackoverflow.com/questions/42865697/… angular.dev/reference/configs/…

Dml · Accepted Answer · 2025-11-26 08:07:26Z

1

I found a rough solution by following here.
https://angular.dev/reference/configs/workspace-config#style-preprocessor-options

In the example, it was to a different direction (src/style-paths). I solved it by including the "src" directory itself.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "src"
              ]
            }
          }
        }
      }
    }
  }
}

Ref to another relevant question.
SCSS Import Relative to Root

answered Nov 26 at 8:07

Dml

841 silver badge9 bronze badges

1 Comment

Eliseo Nov 26 at 8:26

Thanks to share the solution (I was going to answer that same thing but I happy you find the solution :))

Collectives™ on Stack Overflow

Angular import global style file fails

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related