@angular-devkit/build-angular:application does not support sass imports in monorepo

[csaszika]

Command

build, 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

With @angular-devkit/build-angular:browser executor the build worked. Sass imports also worked if I used this way:

@use 'libs/shared/components/src' as components;

With @angular-devkit/build-angular:application, the build is failed because of:

[ERROR] Can't find stylesheet to import.
 ╷
2 │ @use 'libs/shared/components/src' as components;
 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ╵
 apps/scaffold/src/styles.scss 1:1  root stylesheet [plugin angular-sass]

With style including option I'm able to include third party css libs and monorepo libs as well, but I have to change the path everywhere in apps and in libs as well to relative paths instead of using paths from root:

libs/shared/css-lib -> ../../../libs/shared/css-lib OR ../../../../../libs/shared/css-lib

Desired solution:
Changing to @angular-devkit/build-angular:application executor could use the same css imports:

@use 'libs/shared/components/src' as components;

OR same imports what we can use in ts files;

@use '@shared/lib' as components;

Minimal Reproduction

1. Create a monorepo (with nx)
2. create an app
3. create a sass library
4. use the sass library css inside the app with path libs/path/to/lib or with @shared/lib
5. see error in console after run build target

Exception or Error

[ERROR] Can't find stylesheet to import.
  ╷
2 │ @use 'libs/shared/components/src' as components;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  apps/scaffold/src/styles.scss 1:1  root stylesheet [plugin angular-sass]

Your Environment

@angular/xxx        -> 17.1.1.
@angular-devkit/xxx -> 17.1.1
@nx/angular         -> 18.0.1.

Anything else relevant?

With @angular-devkit/build-angular:browser-esbuild the result is the same. Perhaps it is the same issue in both cases.
Probably these esbuild based executors are not prepared to sass/css imports in a monorepo.

[clydin]

Duplicate of #26848

[csaszika]

@clydin Please reopen the issue. The mentioned duplication is true, however it is not resolved. I used the followings:

In app:

"stylePreprocessorOptions": {
     "includePaths": [".", "@whg/css-utils", "node_modules/@whg/css-utils", "libs/shared/css-utils/src"]
 },

In library ng-package.json:

"lib": {
    "entryFile": "src/index.ts",
    "styleIncludePaths": ["@whg/css-utils", "../../css-utils/src", "libs/shared/css-utils/src"]
  },

As you can see I tried many formats without success.
Problem is still valid:

1. css util library
2. component library -> dep is css-utils
3. app -> deps are css-utils and component library

....but anyway, for now I use a workaround as I merged css-util and component libs together...however it is not a solution.

[clydin]

The option is successfully being used in numerous Angular CLI projects. However, the Angular team does not provide direct support for configuring nx workspaces. The paths may need to be altered to reflect the nx project layout and/or behavior.

[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.}