Global SCSS style is no longer loaded in Storybook with Angular 12-CodePudding

I am migrating a library to use Angular and Material 12 (currently in version 10), and Storybook is used to expose the various components of this library. To do so, I upgraded Angular and Material to version 12 with the Angular Update Guide, Storybook to version 6.3 with npx sb upgrade and I followed the steps described here to fully migrate Storybook and use webpack5.

Unfortunately, the base.scss file previously included globally in the rendering of stories is no longer included (stories are now without any CSS). This base.scss file is included in a Typescript file with:

import '!style-loader!css-loader!sass-loader!./base.scss';

With Storybook 6.3 and Angular 10, everything works perfectly.

To fix that, I tried to add this configuration in main.js, as it is described in the documentation:

webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  }

But I got this error for each of my story:

SassError: SassError: expected "{".
  ╷
1 │ import api from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                  ^
  ╵
  src\stories\utils\trademarks-format\example-utils-trademarks-format.component.scss 1:98  root stylesheet
    at Object.callback (D:\bmx\node_modules\@angular-devkit\build-angular\node_modules\sass-loader\dist\index.js:54:16)
    at Worker.<anonymous> (D:\bmx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:134:25)
    at Worker.emit (events.js:400:28)
    at MessagePort.<anonymous> (internal/worker.js:236:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)

I have removed node-sass that was previously installed, I have added sass-loader, css-loader, sass and style-loader in dev dependencies and I tried to add the @storybook/preset-scss addon without the custom webpack configuration but it didn't work. I also tried this solution but it didn't work either.

I saw here that it could be an issue with sass-loader in version greater than 10 so I have choosed the 10.1.1 version but I have the impression that the devkit dependency of Angular 12 imports sass-loader in its version 12. Would there be a conflict there? If so, I don't know how to force Angular 12 to use version 10 of sass-loader.

I would be really happy to have a lead that could solve my problem because it's been several days since I feel like I tried everything...

Thank you

CodePudding user response：

I have answered my question. In fact there was no need to change the webpack configuration for my case. It was enough to add the @storybook/preset-scss addon.

The problem was described here. I needed to downgrade Angular to 12.1 version. I was in 12.2.

Hopefully this helps someone.