import some scss files into library component scss throw errors

[robertIsaac]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

not sure

Description

this affect only libraries
when trying to import bootstrap mixins @import "~bootstrap/scss/mixins"; it throw the following error ERROR: Can't find stylesheet to import.

but the exact same code in a normal project build successfully

🔬 Minimal Reproduction

clone
https://github.com/robertIsaac/scss-reproduce
run ng build

🔥 Exception or Error

Compiling TypeScript sources through ngc
ERROR: Can't find stylesheet to import.
  ╷
3 │ @import "~bootstrap/scss/mixins";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects\scss-reproduce\src\lib\reproduce-import\reproduce-import.component.scss 3:9  root stylesheet
An unhandled exception occurred: Can't find stylesheet to import.
  ╷
3 │ @import "~bootstrap/scss/mixins";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects\scss-reproduce\src\lib\reproduce-import\reproduce-import.component.scss 3:9  root stylesheet
See "C:\Users\...\AppData\Local\Temp\ng-ERaruX\angular-errors.log" for further details.

🌍 Your Environment

$  ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.4
Node: 12.14.1
OS: win32 x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.4
@angular-devkit/build-angular      0.901.4
@angular-devkit/build-ng-packagr   0.901.4
@angular-devkit/build-optimizer    0.901.4
@angular-devkit/build-webpack      0.901.4
@angular-devkit/core               9.1.4
@angular-devkit/schematics         9.1.4
@ngtools/webpack                   9.1.4
@schematics/angular                9.1.4
@schematics/update                 0.901.4
ng-packagr                         9.1.3
rxjs                               6.5.5
typescript                         3.8.3
webpack                            4.42.0

Anything else relevant?
i do another two imports and they are working fine

@import "~boosted/scss/functions";
@import "~boosted/scss/variables";
@import "~boosted/scss/mixins";

and changing the import to
@import "~boosted/scss/_mixins"; will make the build run successfully

it can be related to that there is a directory named mixins inside the bootstrap/scss directory, it's just a a guess

[alan-agius4]

Hi @robertIsaac, libraries and applications are built using 2 separate and very different pipelines which may result in some different behaviours.

• Applications are built using Webpack with sass-loader which implements it's own resolution strategy for tilda imports.

• Libraries are built ng-packagr which use node-sass-tilde-importer to resolve tilda imports.

Thus, this issue is not caused by Angular CLI. I suggest you open a feature request to ng-packagr to create it's own importer or node-sass-tilde-importer to add the implementation to be similar to sass-loader.

Note: ~ is non standard way to import from node_modules, my personal recommendation would be to use style include paths and remove the ~ import.

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