mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:31:08 +08:00
95 lines
3.1 KiB
Plaintext
95 lines
3.1 KiB
Plaintext
With Angular, you'll need to take special care of handling CSS.
|
|
|
|
### Working with previous versions
|
|
|
|
If you're working with an older version of Angular, in addition to providing a custom Webpack configuration, you can also use an inline loader to load your CSS safely. For example:
|
|
|
|
```js
|
|
import '!style-loader!css-loader!./styles.css';
|
|
```
|
|
|
|
### With Angular 13
|
|
|
|
With Angular version 13 and above, you should use a builder configuration to import your CSS, for example:
|
|
|
|
```json
|
|
{
|
|
"my-project": {
|
|
"architect": {
|
|
"build": {
|
|
"builder": "@angular-devkit/build-angular:browser",
|
|
"options": {
|
|
"styles": ["src/styles.css", "src/styles.scss"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Additionally, if you need Storybook specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md), which will override the application's styles:
|
|
|
|
```json
|
|
{
|
|
"storybook": {
|
|
"builder": "@storybook/angular:start-storybook",
|
|
"options": {
|
|
"browserTarget": "my-default-project:build",
|
|
"styles": [".storybook/custom-styles.scss"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Nx with Angular 13
|
|
|
|
If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types),
|
|
you can extend your project's configuration (i.e., `project.json`) and provide the application's styles.
|
|
|
|
For earlier Nx versions (prior to `14.1.8`), your configuration would look like this:
|
|
|
|
```json
|
|
"build-storybook": {
|
|
"executor": "@nrwl/storybook:build",
|
|
"outputs": ["{options.outputPath}"],
|
|
"options": {
|
|
"uiFramework": "@storybook/angular",
|
|
"outputPath": "dist/storybook/example-lib",
|
|
"config": {
|
|
"configFolder": "libs/example-lib/storybook/.storybook"
|
|
},
|
|
"projectBuildConfig": "example-lib:build-storybook",
|
|
"styles": ["apps/example-app/src/styles.scss"]
|
|
}
|
|
}
|
|
```
|
|
|
|
Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:
|
|
|
|
```json
|
|
"storybook": {
|
|
"executor": "@storybook/angular:start-storybook",
|
|
"options": {
|
|
"configDir": "apps/example-lib/.storybook",
|
|
"browserTarget": "example-lib:build-storybook",
|
|
},
|
|
},
|
|
"build-storybook": {
|
|
"executor": "@storybook/angular:build-storybook",
|
|
"outputs": ["{options.outputPath}"],
|
|
"options": {
|
|
"outputDir": "dist/storybook/example-lib",
|
|
"configDir": "apps/example-lib/.storybook",
|
|
"browserTarget": "example-lib:build-storybook",
|
|
"styles": [".storybook/custom-styles.scss"],
|
|
"stylePreprocessorOptions": {
|
|
"includePaths": [
|
|
"libs/design-system/src/lib"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
When Nx runs, it will load Storybook's configuration and styling based on the `storybook`'s [`browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
|