[Angular13] External style directories not working any more

[habtim]

Describe the bug
This bug occured when upgrading to Angularv13.
First of all we ran into the same problem, stated here

After resolving this issue with TsconfigPathsPlugin, we ran into a problem with our styles/scss.
We usually use the inline statement import '!style-loader!css-loader!sass-loader!PATH_TO_STYLE_FILE to include our styles, which throughs the following kind of errors:

ERR! Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ERR! SassError: Can't find stylesheet to import.
ERR!   ╷
ERR! 1 │ @import 'mixins/all.mixins.scss';
ERR!   │         ^^^^^^^^^^^^^^^^^^^^^^^^
ERR!   ╵
ERR!   PATH_TO_COMPONENT_FILE.scss 1:9  root stylesheet

Adding the styles explicitly to webpack, via

  "webpackFinal": async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              includePaths: [path.resolve(__dirname, 'PATH_TO_FILE')]
            }
          }
        }
      ],
      // include: path.resolve(__dirname, '../projects/style-lib/src/lib')
    });

    return config;
  }

does resolve in a new error:

SassError: expected "{".
  ╷
1 │ var api = require("!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
  │                                                                                                  ^
  ╵
  src\app\button\button.component.scss 1:98  root stylesheet
    at processResult (C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\webpack\lib\NormalModule.js:751:19)
    at C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\webpack\lib\NormalModule.js:853:5
    at C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback (C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\sass-loader\dist\index.js:54:7)
    at Worker.<anonymous> (C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:123:25)
    at Worker.emit (events.js:375:28)
    at MessagePort.<anonymous> (internal/worker.js:216:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)
SassError: SassError: expected "{".
  ╷
1 │ var api = require("!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
  │                                                                                                  ^
  ╵
  src\app\button\button.component.scss 1:98  root stylesheet
    at Object.callback (C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\sass-loader\dist\index.js:54:16)
    at Worker.<anonymous> (C:\Users\XXX\Documents\code\angular13-storybook-test\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:123:25)
    at Worker.emit (events.js:375:28)
    at MessagePort.<anonymous> (internal/worker.js:216:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)

To Reproduce
See reproduction repo here

System

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 14.17.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.1593.0)
  npmPackages:
    @storybook/addon-actions: ^6.4.4 => 6.4.4
    @storybook/addon-docs: ^6.4.4 => 6.4.4
    @storybook/addon-essentials: ^6.4.4 => 6.4.4
    @storybook/addon-links: ^6.4.4 => 6.4.4
    @storybook/angular: ^6.4.4 => 6.4.4
    @storybook/builder-webpack5: ^6.4.4 => 6.4.4
    @storybook/manager-webpack5: ^6.4.4 => 6.4.4

Additional context
This error occurred when updating to Angular v13

[Marklb]

I typically try to avoid adding additional style loaders to Angular, since it comes with it's own Webpack config for loading styles.

Would the builder Storybook provides now work? It supports "styles" and "stylePreprocessorOptions" for "application" and "library" projects.

I added the following to your repro's angular.json and styles worked.

{
  ...,
  "projects": {
    "angular13-storybook-test": {
      "projectType": "application",
      ...,
      "architect": {
        "build": {
          ...
        },
        ...,
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "browserTarget": "angular13-storybook-test:build",
            "styles": ["src/styles.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["projects/style-lib/src/lib"]
            },
            "compodoc": false, // This is because of #16728 on Windows and maybe Stackblitz, but you may not not to disable compodoc.
            "port": 4400
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "browserTarget": "angular13-storybook-test:build",
            "styles": ["src/styles.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["projects/style-lib/src/lib"]
            }
          }
        }
      }
    }
  },
  "defaultProject": "angular13-storybook-test"
}

If you are on Windows you may need to run compodoc before Storybook, until #16728 is merged.

Here is a working Stackblitz for your repro: https://stackblitz.com/edit/github-8cmy1x?file=package.json&preset=node

In Stackblitz I couldn't get the ng script to work, so I had to call the cli's init script directly. You wouldn't have to do that normally.

[habtim]

Thank you @Marklb!
Are there any docs about making use of angular.json?

Also, I would like to avoid using this solution, as we did not define any build architectures for our libraries.
They are beeing consumed by apps directly via TypeScript without beeing explicitly compiled beforehand.
Therefore defining browserTargets would not work in our example.
I can make another repro, if needed.

Thanks in advance!

[Marklb]

@habtim I don't think there are docs for the builders yet, but the docs should be updated with them soon.

Defining a "browserTarget" isn't required. I updated that Stackblitz project to show it loading stories from the app and lib directories. I also stripped out most of the config in angular.json to show that most of it isn't important to the builder. https://stackblitz.com/edit/github-8cmy1x?file=angular.json&preset=node I should have forked the Stackblitz project, instead of modifying it, but I can make another like it was previously if needed.

If you do need the loader then someone else may be able to help. I normally run into more trouble than it's worth trying to get style loaders to work, since Angular provides their own way to add styles, but someone more familiar with using them may know the problem.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[rlam3]

@habtim were you able to get around this issue?

[habtim]

Hey @rlam3,
Yes, thank you 👍