You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+35-4Lines changed: 35 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -163,7 +163,7 @@ NODE_ENV=production ./test
163
163
## How does it work?
164
164
165
165
1. Builds index of all stylesheet imports per file (imports of files with `.css` or `.scss` extension).
166
-
1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files.
166
+
1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files into a lookup of CSS module references.
167
167
1. Iterates through all [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) element declarations.
168
168
1. Parses the `styleName` attribute value into anonymous and named CSS module references.
169
169
1. Finds the CSS class name matching the CSS module reference:
@@ -239,7 +239,7 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two
239
239
npm install postcss-scss --save-dev
240
240
```
241
241
242
-
2. Add a filetype syntax mapping to the Babel plugin configuration
242
+
2. Add a `filetypes` syntax mapping to the Babel plugin configuration. For example for SCSS:
243
243
244
244
```json
245
245
"filetypes": {
@@ -249,7 +249,7 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two
249
249
}
250
250
```
251
251
252
-
And optionaly specify extra plugins
252
+
And optionally specify extra plugins:
253
253
254
254
```json
255
255
"filetypes": {
@@ -262,7 +262,9 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two
262
262
}
263
263
```
264
264
265
-
Postcss plugins can have options specified by wrapping the name and an options object in an array inside your config
265
+
> NOTE: [`postcss-nested`](https://github.com/postcss/postcss-nested) is added as an extra plugin for demonstration purposes only. It's not needed with [`postcss-scss`](https://github.com/postcss/postcss-scss) because SCSS already supports nesting.
266
+
267
+
Postcss plugins can have options specified by wrapping the name and an options object in an array inside your config:
266
268
267
269
```json
268
270
"plugins": [
@@ -490,3 +492,32 @@ To enable live reloading of the CSS:
490
492
> Note:
491
493
>
492
494
> This is a [webpack](https://webpack.github.io/) specific option. If you are using `babel-plugin-react-css-modules` in a different setup and require CSS live reloading, raise an issue describing your setup.
495
+
496
+
### I get a "Cannot use styleName attribute for style name '`[X]`' without importing at least one stylesheet." error
497
+
498
+
First, ensure that you are correctly importing the CSS file following the [conventions](#conventions).
499
+
500
+
If you are correctly importing but using different CSS (such as SCSS), this is likely happening because your CSS file wasn't able to be successfully parsed. You need to [configure a syntax loader](#configurate-syntax-loaders).
501
+
502
+
### I get a "Could not resolve the styleName '`[X]`' error but the class exists in the CSS included in the browser.
503
+
504
+
First, verify that the CSS is being included in the browser. Remove from `styleName` the reference to the CSS class that's failing and view the page. Search through the `<style>` tags that have been added to the `<head>` and find the one related to your CSS module. Copy the code into your editor and search for the class name.
505
+
506
+
Once you've verified that the class is being rendered in CSS, the likely cause is that the `babel-plugin-react-css-modules` is unable to find your CSS class in the parsed code. If you're using different CSS (such as SCSS), verify that you have [configured a syntax loader](#configurate-syntax-loaders).
507
+
508
+
However, if you're using a syntaxes such as [`postcss-scss`](https://github.com/postcss/postcss-scss) or [`postcss-less`](https://github.com/webschik/postcss-less), they do not compile down to CSS. So if you are programmatically building a class name (see below), webpack will be able to generate the rendered CSS from SCSS/LESS, but `babel-plugin-react-css-modules` will not be able to parse the SCSS/LESS.
509
+
510
+
A SCSS example:
511
+
512
+
```scss
513
+
$scales: 10, 20, 30, 40, 50;
514
+
515
+
@each$scalein$scales {
516
+
.icon-#{$scale} {
517
+
width: $scale;
518
+
height: $scale;
519
+
}
520
+
}
521
+
```
522
+
523
+
`babel-plugin-react-css-modules` will not receive `icon-10` or `icon-50`, but `icon-#{$scale}`. That is why you receive the error that `styleName` `"icon-10"` cannot be found.
0 commit comments