我正在尝试加载故事书中的自定义全局样式文件theme-default.scss。虽然我的组件正在故事书中加载，但样式没有被应用。我遵循了这个教程Storybook自定义webpack配置的官方文档。(不过我对webpack不是很熟悉(
这是我的.storybook/main.js文件
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//import '!style-loader!css-loader!../src/stories/stories.scss'; // for scss
module.exports = {
stories: ['../src/**/*.stories.ts'],
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-notes'],
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../')
});
// Return the altered config
return config;
}
};
它给了我以下错误
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of D:code2mawanimawani-angular-clientdpd-billingsrcappapp.component.scss
>> var api = require("!../../node_modules/style-loader/dist/runtime/injectStyle
^
@ ./src/app/app.component.ts 45:18-49 45:61-92 45:104-135 45:147-178
@ ./src/app/app.module.ts
@ ./src/stories/containers/SearchBar.stories.ts
@ ./src sync ^./(?:(?:(?!.)(?:(?:(?!(?:|[\/]).).)*?)[\/])?(?!.)(?=.)[^\/]*?.stories.ts[\/]?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/theme-default.scss ./src/styles.scss
ERROR in ./src/app/modules/feature/public/page-not-found/page-not-found.component.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
on line 1 of D:code2mawanimawani-angular-clientdpd-billingsrcappmodulesfeaturepublicpage-not-foundpage-not-found.component.scss
>> var api = require("!../../../../../../node_modules/style-loader/dist/runtime
^
@ ./src/app/modules/feature/public/page-not-found/page-not-found.component.ts 12:18-60 12:72-114 12:126-168 12:180-222
@ ./src/app/app.module.ts
@ ./src/stories/containers/SearchBar.stories.ts
@ ./src sync ^./(?:(?:(?!.)(?:(?:(?!(?:|[\/]).).)*?)[\/])?(?!.)(?=.)[^\/]*?.stories.ts[\/]?)$
@ ./.storybook/generated-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/theme-default.scss ./src/styles.scss
^
然后，我尝试使用这个注释中提到的内联加载程序语法以下是我的.storybook/preview.js的外观
import '!style-loader!css-loader!sass-loader!./_common.scss';
内部_common.css
@import '../src/theme-default.scss';
@import '../src/styles.scss';
虽然它没有给出任何错误，但仍然没有应用样式！
这是我的angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xyz": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/xyz",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/theme-default.scss",
"src/styles.scss"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "xyz:build"
},
"configurations": {
"production": {
"browserTarget": "xyz:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "xyz:build"
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "xyz:serve"
},
"configurations": {
"production": {
"devServerTarget": "xyz:serve:production"
}
}
}
}
}
},
"defaultProject": "xyz",
"cli": {
"analytics": ""
}
}
我也尝试过使用这种方法sass资源加载器
我做了很多尝试和错误，但无法找到解决方案。如有任何帮助，我们将不胜感激。谢谢
自Angular 13及以后，样式导入必须添加到Angular.json中的故事书architekt中，位于项目>(构建-(故事书>选项>样式。由于不再支持在.storybook/main.js中导入样式表，您可以删除它，改为添加样式表，如下所示。
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"
],
...
},
...
},
...
}
你可以在故事书的迁移指南中找到这些信息。
对于6.4.*以下的故事书版本：如果应用程序中使用了theme-default.scss，那么您只需将其导入Angular应用程序的全局styles.scss文件即可。