From 1da6118141a78830d1a8e784ac0cd0963de0a652 Mon Sep 17 00:00:00 2001 From: Jon Rimmer Date: Mon, 19 Feb 2018 12:25:58 +0000 Subject: [PATCH 1/2] Add warning about importing CSS in Angular CLI projects The changes in https://github.com/storybooks/storybook/pull/2735 mean that the CSS loader is not available when creating a storybook for an Angular CLI project, so CSS cannot be imported directly within a story with using the inline loader syntax. --- docs/src/pages/configurations/default-config/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/src/pages/configurations/default-config/index.md b/docs/src/pages/configurations/default-config/index.md index a5f402c9e3d..fb5b940a3e9 100644 --- a/docs/src/pages/configurations/default-config/index.md +++ b/docs/src/pages/configurations/default-config/index.md @@ -56,6 +56,11 @@ import './styles.css'; > **Note:** this is plain CSS only. If you need a preprocessor like SASS, you need to [customize the webpack config](/configurations/custom-webpack-config/). +> **Warning:** storybooks for projects that use Angular CLI must use the inline loader syntax: +> ```js +> import '!style-loader!css-loader!./styles.css'; +> ``` + ### Image and Static File Support You can also import images and media files directly via JavaScript. From 83d4986215c834f857220392777907a491587d79 Mon Sep 17 00:00:00 2001 From: Jon Rimmer Date: Mon, 19 Feb 2018 15:42:41 +0000 Subject: [PATCH 2/2] Mention configuring the Webpack config --- docs/src/pages/configurations/default-config/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/configurations/default-config/index.md b/docs/src/pages/configurations/default-config/index.md index fb5b940a3e9..24532b8fb91 100644 --- a/docs/src/pages/configurations/default-config/index.md +++ b/docs/src/pages/configurations/default-config/index.md @@ -56,7 +56,7 @@ import './styles.css'; > **Note:** this is plain CSS only. If you need a preprocessor like SASS, you need to [customize the webpack config](/configurations/custom-webpack-config/). -> **Warning:** storybooks for projects that use Angular CLI must use the inline loader syntax: +> **Warning:** storybooks for projects that use Angular CLI cannot import CSS by default. They must either [customize the webpack config](/configurations/custom-webpack-config/), or use the inline loader syntax: > ```js > import '!style-loader!css-loader!./styles.css'; > ```