desde hace unos días he estado tratando de integrar una hoja de estilo global en el libro de cuentos. Ya integré las configuraciones webpackFinal de la documentación para el soporte de sass. En el directorio .storybook, creé un archivo scss-loader.scss que debería cargar las hojas de estilo globales. En el archivo 'preview.js', importo ''!style-loader!css-loader!sass-loader!./scss-loader.scss''
Sin embargo, me sale el siguiente error cada vez:
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)Tal vez alguien tenga un destello de inspiración, lamentablemente no he encontrado nada adecuado en los últimos días 😕
¡¡¡Gracias de antemano por su ayuda!!!
Ya no se admite la importación de estilos dentro de su .storybook/preview.js . Desde Angular 13 en adelante, las importaciones de estilo deben agregarse en angular.json, en your-project > (build-)storybook > options > styles .
En tu 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" ], ... }, ... }, ... }Puede encontrar esta información en la guía de migración de Storybook.