Skip to content

Commit 9c165a4

Browse files
docs: update migration guide (#1586)
1 parent af834b4 commit 9c165a4

File tree

2 files changed

+31
-6
lines changed

2 files changed

+31
-6
lines changed

CHANGELOG.md

+25
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,31 @@ import * as style from "./style.css";
2727
console.log(style.myClass);
2828
```
2929

30+
To restore 6.x behavior, please use:
31+
32+
```js
33+
module.exports = {
34+
module: {
35+
rules: [
36+
{
37+
test: /\.css$/i,
38+
loader: "css-loader",
39+
options: {
40+
modules: {
41+
namedExport: false,
42+
exportLocalsConvention: 'as-is',
43+
//
44+
// or, if you prefer camelcase style
45+
//
46+
// exportLocalsConvention: 'camel-case-only'
47+
},
48+
},
49+
},
50+
],
51+
},
52+
};
53+
```
54+
3055
* The `modules.exportLocalsConvention` has the value `as-is` when the `modules.namedExport` option is `true` and you don't specify a value
3156
* Minimum supported webpack version is `5.27.0`
3257
* Minimum supported Node.js version is `18.12.0`

README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ Then add the plugin to your `webpack` config. For example:
4747
**file.js**
4848

4949
```js
50-
import css from "file.css";
50+
import * as css from "file.css";
5151
```
5252

5353
**webpack.config.js**
@@ -1174,11 +1174,11 @@ Enables/disables ES modules named export for locals.
11741174
```js
11751175
import * as styles from "./styles.css";
11761176

1177+
// If using `exportLocalsConvention: "as-is"` (default value):
1178+
console.log(styles["foo-baz"], styles.bar);
1179+
11771180
// If using `exportLocalsConvention: "camel-case-only"`:
11781181
console.log(styles.fooBaz, styles.bar);
1179-
1180-
// If using `exportLocalsConvention: "as-is"`:
1181-
console.log(styles["foo-baz"], styles.bar);
11821182
```
11831183

11841184
You can enable a ES module named export using:
@@ -2337,8 +2337,8 @@ File treated as `CSS Module`.
23372337
Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript.
23382338

23392339
```jsx
2340-
import svars from "variables.scss";
2341-
import styles from "Component.module.scss";
2340+
import * as svars from "variables.scss";
2341+
import * as styles from "Component.module.scss";
23422342

23432343
// Render DOM with CSS modules class name
23442344
// <div className={styles.componentClass}>

0 commit comments

Comments
 (0)