From 4a81004b08752b196fb610fb1d515a034fae31ba Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 11 May 2023 21:46:39 +0100 Subject: [PATCH] Tweaks to the styling and css section --- .../configure/css-troubleshooting/angular.mdx | 94 ---------------- docs/configure/styling-and-css.md | 100 +++++++++++++++++- ...ybook-preview-import-global-styles.js.mdx} | 3 +- ...ybook-preview-import-global-styles.ts.mdx} | 0 4 files changed, 99 insertions(+), 98 deletions(-) delete mode 100644 docs/configure/css-troubleshooting/angular.mdx rename docs/{configure/import-css/import-css.js.mdx => snippets/common/storybook-preview-import-global-styles.js.mdx} (95%) rename docs/{configure/import-css/import-css.ts.mdx => snippets/common/storybook-preview-import-global-styles.ts.mdx} (100%) diff --git a/docs/configure/css-troubleshooting/angular.mdx b/docs/configure/css-troubleshooting/angular.mdx deleted file mode 100644 index d9c6c7a81dd2..000000000000 --- a/docs/configure/css-troubleshooting/angular.mdx +++ /dev/null @@ -1,94 +0,0 @@ -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). diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md index c0a8aa0b6dbc..b328359af00f 100644 --- a/docs/configure/styling-and-css.md +++ b/docs/configure/styling-and-css.md @@ -8,11 +8,18 @@ There are many ways to include CSS in a web application, and correspondingly the Storybook is pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering). - + -If your component files import their CSS files, this will work too. The noticeable exception to this is if you're using CSS processor tools like Sass or Postcss. + + + - +If your component files import their CSS files, this will work too. The noticeable exception to this is if you're using CSS processor tools like Sass or Postcss. ## CSS processors @@ -27,3 +34,90 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in ## Adding webfonts If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration). + +## Troubleshooting + +### Styles aren't being applied with Angular + +The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` ad adjust the `builder` configuration to import your CSS: + +```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 component libraries not loading styles + +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 (before `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 [`storybook`'s `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget). diff --git a/docs/configure/import-css/import-css.js.mdx b/docs/snippets/common/storybook-preview-import-global-styles.js.mdx similarity index 95% rename from docs/configure/import-css/import-css.js.mdx rename to docs/snippets/common/storybook-preview-import-global-styles.js.mdx index 6937b9f15b25..e38fa4503ef9 100644 --- a/docs/configure/import-css/import-css.js.mdx +++ b/docs/snippets/common/storybook-preview-import-global-styles.js.mdx @@ -1,8 +1,9 @@ ```js // .storybook/preview.js + import '../src/styles/global.css'; export default { parameters: {}, }; -``` \ No newline at end of file +``` diff --git a/docs/configure/import-css/import-css.ts.mdx b/docs/snippets/common/storybook-preview-import-global-styles.ts.mdx similarity index 100% rename from docs/configure/import-css/import-css.ts.mdx rename to docs/snippets/common/storybook-preview-import-global-styles.ts.mdx