5

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

2 Answers 2

3

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.

3

In the latest version of Angular (13), there is a much simpler way of adding your global styles to your storybook. Just add your stylesheets to your storybook-architekt in your angular.json, under your-project > (build-)storybook > options > styles.

As importing the stylesheets in .storybook/main.js is no longer supported, you can remove it and instead add the stylesheets like shown below.

angular.json:

"your-project": {
  ...
  "storybook": {
      "builder": "@storybook/angular:start-storybook",
      "options": {
          ...
          "projectBuildConfig": "your-lib:build-storybook",
          "styles": [
              "path-to-the-stylesheet/styles.scss",
              "path-to-the-stylesheet/your-theme.scss"
          ],
          ...
      },
      ...
  
    },
    ...
}

You can find this information in the migration-guide of storybook.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.