docs: improve more

webpack-contrib · Apr 8, 2024 · abc0b5f · abc0b5f
1 parent 565362c
commit abc0b5f
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -125,7 +125,7 @@ const divElement = document.createElement("div");
 divElement.className = styles["my-class"];
 ```
 
-All locals (class names) stored in imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -138,7 +138,11 @@ module.exports = {
         use: [
           // The `injectType`  option can be avoided because it is default behaviour
           { loader: "style-loader", options: { injectType: "styleTag" } },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],
@@ -184,7 +188,7 @@ const divElement = document.createElement("div");
 divElement.className = styles["my-class"];
 ```
 
-All locals (class names) stored in imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -199,7 +203,11 @@ module.exports = {
             loader: "style-loader",
             options: { injectType: "singletonStyleTag" },
           },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],
@@ -253,7 +261,7 @@ const divElement = document.createElement("div");
 divElement.className = myClass;
 ```
 
-All locals (class names) stored in `locals` property of imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -270,7 +278,11 @@ module.exports = {
         test: /\.lazy\.css$/i,
         use: [
           { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],
@@ -324,7 +336,7 @@ const divElement = document.createElement("div");
 divElement.className = myClass;
 ```
 
-All locals (class names) stored in `locals` property of imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -344,7 +356,11 @@ module.exports = {
             loader: "style-loader",
             options: { injectType: "lazySingletonStyleTag" },
           },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],