Question

0

161

Vistas

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

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!!!

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-11T00:00:05.550Z

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.