using global stylesheets with storybook & angular - SassError: SassError: expected "{"

user_11033848 0
Viewed 432

for a few days now I've been trying to integrate a global stylesheet in storybook. I have already integrated the webpackFinal configs from the documentation for sass support. In the .storybook directory I created a scss-loader.scss file which should load the global stylesheets. In the 'preview.js' file, i import ''!style-loader!css-loader!sass-loader!./scss-loader.scss''

However, I get the following error every time:

ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
   ╷
2 │ import API from "! ../../../../../ node_modules / style-loader / dist / runtime / injectStylesIntoStyleTag.js";

projects\svm\ui\_theme.scss 2:101  root stylesheet
    at processResult (F:\sources\svm\UI\node_modules\webpack\lib\NormalModule.js:748:19)
    at F:\sources\svm\UI\node_modules\webpack\lib\NormalModule.js:847:5
    at F:\sources\svm\UI\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at F:\sources\svm\UI\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (F:\sources\svm\UI\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback (F:\sources\svm\UI\node_modules\@angular-devkit\build-angular\node_modules\sass-loader\dist\index.js:54:7)
    at Worker.<anonymous> (F:\sources\svm\UI\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:134: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)

Maybe someone has a flash of inspiration, unfortunately I haven't found anything suitable over the last few days

Thank you in advance for your help!!!

storybook angular webpack sass javascript
2 Answers

Importing styles inside your .storybook/preview.js is not supported any more. From Angular 13 and onwards, the style imports must be added in angular.json, under your-project > (build-)storybook > options > styles.

In your angular.json:

"your-project": {
  ...
  "storybook": {
      "builder": "@nrwl/storybook:storybook",
      "options": {
          ...
          "projectBuildConfig": "your-project: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.

user_61999630

I had also a problem where the stylesheets can't be found. I need to add the following to the options (of the storybook and build-storybook target) to make it work:

"options": {
  ...
  "stylePreprocessorOptions": {
    "includePaths": [
      "path-to-the-stylesheet/styles.scss",
      "path-to-the-stylesheet/your-theme.scss"
    ]
  }
  ...
},
user_11582540
Related