@angular-devkit/build-angular:browser-esbuild throw error on scss import

[PronDmytro]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

I trying out the new experimental esbuild builder and got a lot of same erros with import scss files

🔬 Minimal Reproduction

angular.json

...
  "builder": "@angular-devkit/build-angular:browser-esbuild"
...

src/app/core/faq/faq.component.scss

@import "src/assets/styles/variables";

.c-faq {

  &__header {
    color: $oxford-blue;
  }
}

src/assets/styles/variables.scss

$oxford-blue: rgba(51, 63, 82, 1);

🔥 Exception or Error

X [ERROR] [plugin angular-compiler] Could not resolve "src/assets/styles/variables"

    src/app/core/faq/faq.component.scss:1:8:
      1 │ @import "src/assets/styles/variables";
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

🌍 Your Environment

Angular CLI: 14.0.5
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.5
@angular-devkit/build-angular   14.0.5
@angular-devkit/core            14.0.5
@angular-devkit/schematics      14.0.5
@angular/cdk                    14.0.4
@schematics/angular             14.0.5
rxjs                            7.5.5
typescript                      4.7.4

[alan-agius4]

This is because Sass by default is only able to resolve files relative to the containing file. Once no files matches the compile will fallback to resolve the files based on the loadPaths/includePaths.

Under Webpack these work because additional paths are added in sass-loader to the include paths https://github.com/webpack-contrib/sass-loader/blob/49a578a218574ddc92a597c7e365b6c21960717e/src/utils.js#L306-L322.

You could add the projectRoot as includePaths in your angular.json to make this work.

[PronDmytro]

Like this?
(that not working)

"stylePreprocessorOptions": {
              "includePaths": [
                "src"
              ]
            },

[alan-agius4]

It depends on the structure of you repo and project.

Single project workspace:

"stylePreprocessorOptions": {
  "includePaths": [
    ""
  ]
},

Multi project workspace:

"stylePreprocessorOptions": {
  "includePaths": [
    "projects/<app-project-name>"
  ]
},

[PronDmytro]

not working(

[alan-agius4]

@PronDmytro, actually just noticed you are using 14.0 and not 14.1. SCSS support was only introduced in 14.1.

Can you please update @angular/cli and @angular-devkit/build-angular and see if the problem is resolved? (Might not needed the includePaths at all in v14.1)

[PronDmytro]

Yes, that works. thx
But I got new errors

X [ERROR] [plugin angular-compiler] No loader is configured for ".ttf" files: src/assets/fonts/Lato/Lato-Regular.ttf

    src/app/core/admin/admin-data-management/data-management-bonds/data-management.component.scss:5:30:
      5 │ ...local("Lato Regular"), url(src/assets/fonts/Lato/Lato-Regular.ttf);
        ╵    

[alan-agius4]

@PronDmytro, that seems like indeed a bug that we need to address.

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