import some scss files into library component scss throw errors

[robertIsaac]

Type of Issue

[x] Bug Report
[ ] Feature Request

Description

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

How To Reproduce

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

Expected Behaviour

to build successfully

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr:            9.1.3
@angular/compiler:     9.1.4
rollup:                2.7.5
tsickle:
typescript:            3.8.3

Please include all version numbers that might be relevant, e.g. third-party libraries

bootstrap: 4.4.1

notes

this is created by suggestion of angular/angular-cli#17660 (comment)

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

[Sapendo]

Any updates?

[lars-berger]

The issue is that ng-packagr doesn't respect the sass property in Bootstrap's package.json.

Take for example an NPM package that has a package.json which looks like this:

{
  "name": "@my-app/styles",
  "version": "1.0.0",
  "sass": "src/main.scss"
}

If you attempt to consume that library within an ng-packagr library, it won't work.

// app.component.scss

@import '~@my-app/styles'; // <-- Will throw 'ERROR: Can't find stylesheet to import.'
@import '~@my-app/styles/src'; // However, this will work.

This gets even more hacky if you want to use the modern @use syntax, since the namespace changes (eg. @use '~@my-app/styles/src' as styles;).

Angular does in fact respect the sass property, which creates inconsistencies between how stylesheets are imported in libraries vs. apps.

[lars-berger]

@flash-me It's an issue because it's a convention that Angular follows, but ngpackagr does not. Respecting the "sass" property is expected behavior, which is why this bug report was created in the first place

[lars-berger]

@flash-me Tailwind uses the "styles" property, which is just an alias for "sass" (more common among CSS libraries, since it doesn't even use SASS). You'll find that pretty much every CSS/SCSS library has a "sass" or "styles" in their package.json. Not to mention there's also people who use monorepos and run into into this issue when separating their stylesheets into a library (my personal use case).

[nhhockeyplayer]

why cant this be fixed?
who is holding down this repo?
this should have been part of the functionality prior to this even being public
is the code that brittle?

[Wlada]

Any workaround for this issue?