Angular-cli: application stylePreprocessorOptions cannot detect paths from a library

[jonathanlie]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

The behaviour worked in 8.0.3, and stopped working in 8.1.2.

Description

There is 1 application and 1 library. Let's call this application tenant and the library shared-lib.
A component in the tenant wants to import a stylesheet of a component from shared-lib. This particular stylesheet imports a CSS like so:

@import 'colors'; // the lib's ng-package.json styleIncludePaths is already configured.

This will compile just fine in the library.

Now there is a component in tenant that wants to import this particular stylesheet.
This used to work before by doing this:

1. Import the stylesheet explicitly, in projects/tenant/components/tenant-util.component.ts

  styleUrls: [
    '../../../../shared-lib/src/lib/components/util.component.scss',
    './tenant-util.component.scss'
  ]
...

1. Configure stylePreprocessorOptions in the tenant project settings.

"projects": {
    "tenant": {
           ...
           "stylePreprocessorOptions": {
              "includePaths": [
                "projects/shared-lib/src/lib/stylesheets"
              ]
            },

🔬 Minimal Reproduction

Clone this repo: https://github.com/jonathanlie/angular-demo

1. To demonstrate the working version, inside the cloned repo:

git checkout angular-cli-8.0.3
npm install
ng build shared-lib
ng serve --aot tenant

1. To demonstrate the non-working version

git checkout master
sudo rm -r ./node_modules
npm install
ng build shared-lib
ng serve --aot tenant

There will be an error when serving the tenant app as described in the section below.

🔥 Exception or Error

10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.07 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 712 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 17 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 341 kB [initial] [rendered]
Date: 2019-07-19T06:18:00.166Z - Hash: d82cd3d8b42ac99436fa - Time: 1565ms

ERROR in Module build failed (from /angular-demo/node_modules/sass-loader/lib/loader.js):

@import 'colors';
       ^
      Can't find stylesheet to import.
  ╷
1 │ @import 'colors';
  │         ^^^^^^^^
  ╵
  stdin 1:9  root stylesheet
      in /angular-demo/projects/shared-lib/src/lib/components/util.component.scss (line 1, column 9)

🌍 Your Environment

Angular CLI: 8.1.2
Node: 12.3.1
OS: darwin x64
Angular: 8.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.801.2
@angular-devkit/build-angular      0.801.2
@angular-devkit/build-ng-packagr   0.801.2
@angular-devkit/build-optimizer    0.801.2
@angular-devkit/build-webpack      0.801.2
@angular-devkit/core               8.1.2
@angular-devkit/schematics         8.1.2
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.1.2
@schematics/angular                8.1.2
@schematics/update                 0.801.2
ng-packagr                         5.3.0
rxjs                               6.4.0
typescript                         3.4.5
webpack                            4.35.2

[alan-agius4]

This seems to be related to a bug fix in https://github.com/sass/dart-sass/blob/master/CHANGELOG.md#javascript-api-3 which was done to align dart-sass with node-sass.

Using node-sass, indeed yields the same error but It does provide further details.

ERROR in ../shared-lib/src/lib/components/util.component.scss
Module build failed (from c:/git/cli-repos/angular-demo/node_modules/sass-loader/lib/loader.js):

var colors = require('./colors');
module['exports'] = colors;

// Remark: By default, colors will add style properties to String.prototype
//
// If you don't wish to extend String.prototype you can do this instead and native String will not be touched
//
//   var colors = require('colors/safe);
//   colors.red("foo")
//
//
require('./extendStringPrototype')();
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir"
      in c:\git\cli-repos\angular-demo\node_modules\colors\lib\index.js (line 1, column 1)

Debugging it a bit, I noticed that the problem is that the file name is colors.scss, which is being resolved to the colors, node_modules instead of the sass file. Renaming the file to variables.scss does seem to resolve the issue.

This seems to be an issue from sass-loader Please file an issue on their issue tracker.

[jonathanlie]

Thanks for the swift response! It didn't occur to me that this could be the cause. Will consider filing an issue on their issue tracker later on.

[angular-automatic-lock-bot[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._}