Add warning about importing CSS in Angular CLI projects #3022
Conversation
The changes in #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.
| @@ -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'; | |||
There was a problem hiding this comment.
I would say that this is also available by adding an extra rule to the extended webpack config.
There was a problem hiding this comment.
Do you mean like you talked about here? Is this really something we want to explicitly recommend? It relies on manipulating rules that are part of the private Angular CLI implementation, and could break if Angular changes something.
There was a problem hiding this comment.
I think bringing here a concrete example is not needed. Just to mention about a feature storybook has (extended webpack config). I think that people just need to know about all the possibilities they have.
Codecov Report
@@ Coverage Diff @@
## master #3022 +/- ##
======================================
Coverage 37.3% 37.3%
======================================
Files 435 435
Lines 9427 9427
Branches 904 908 +4
======================================
Hits 3517 3517
+ Misses 5391 5370 -21
- Partials 519 540 +21
Continue to review full report at Codecov.
|
The changes in #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.
What I did
Added a note to the docs.
How to test
yarn docs:dev