title: Global SCSS style is no longer loaded in Storybook with Angular 12
body: <p>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 <code>npx sb upgrade</code> and I followed the steps described <a href="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-62x-to-630" rel="noreferrer">here</a> to fully migrate Storybook and use webpack5.</p>
  <p>Unfortunately, the <strong>base.scss</strong> 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:</p>
  <p><code>import '!style-loader!css-loader!sass-loader!./base.scss';</code></p>
  <p><strong>With Storybook 6.3 and Angular 10, everything works perfectly.</strong></p>
  <p>To fix that, I tried to add this configuration in <strong>main.js</strong>, as it is described in the documentation:</p>
  <pre class="lang-js prettyprint-override"><code>webpackFinal: async (config, { configType }) =&gt; {
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
      return config;
    }
  </code></pre>
  <p>But I got this error for each of my story:</p>
  <pre class="lang-js prettyprint-override"><code>SassError: SassError: expected &quot;{&quot;.
    ╷
  1 │ import api from &quot;!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js&quot;;
    │                                                                                                  ^
    ╵
    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.&lt;anonymous&gt; (D:\bmx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:134:25)
      at Worker.emit (events.js:400:28)
      at MessagePort.&lt;anonymous&gt; (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)
  </code></pre>
  <p>I have removed <code>node-sass</code> that was previously installed, I have added <code>sass-loader</code>, <code>css-loader</code>, <code>sass</code> and <code>style-loader</code> in dev dependencies and I tried to add the <code>@storybook/preset-scss</code> addon without the custom webpack configuration but it didn't work. I also tried <a href="https://github.com/storybookjs/storybook/issues/11052#issuecomment-650618938" rel="noreferrer">this solution</a> but it didn't work either.</p>
  <p>I saw <a href="https://github.com/storybookjs/presets/issues/195#issuecomment-814408891" rel="noreferrer">here</a> 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. <strong>Would there be a conflict there?</strong> If so, I don't know how to force Angular 12 to use version 10 of sass-loader.</p>
  <p>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...</p>
  <p>Thank you</p>