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