From d6222786ecd3a93a3584c1b8db75996f1c2e0977 Mon Sep 17 00:00:00 2001 From: Pranjali Date: Mon, 9 Mar 2026 21:15:28 +0530 Subject: [PATCH 1/5] docs: clarify behavior of importing CSS from JavaScript --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a1d42739..b627c9cd 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,17 @@ Then, add the loader to your `webpack` configuration. For example: **file.js** ```js -import * as css from "file.css"; +import * as css from "./file.css"; +``` + +When using `css-loader`, importing a CSS file from JavaScript works because webpack processes the file through the loader pipeline and turns it into a JavaScript module. + +The imported value is not a native `CSSStyleSheet`. Instead, it is a JavaScript module generated by `css-loader`. When CSS Modules are enabled, the import can contain exported identifiers (such as class name mappings) from the CSS file. + +If you only want to apply the styles and do not need to access any exports, you can simply write: + +```js +import "./file.css"; ``` **webpack.config.js** From 4220ff97a1172db96b3807bbd399027e3d10ebbc Mon Sep 17 00:00:00 2001 From: Pranjali Date: Tue, 10 Mar 2026 00:41:50 +0530 Subject: [PATCH 2/5] docs: address feedback --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index b627c9cd..e0851c93 100644 --- a/README.md +++ b/README.md @@ -50,16 +50,12 @@ Then, add the loader to your `webpack` configuration. For example: import * as css from "./file.css"; ``` -When using `css-loader`, importing a CSS file from JavaScript works because webpack processes the file through the loader pipeline and turns it into a JavaScript module. +When using `css-loader`(https://github.com/webpack/css-loader), webpack processes the file through configured [loaders] (https://webpack.js.org/concepts/loaders/) and turns it into a JavaScript module. The imported value is not a native `CSSStyleSheet`. Instead, it is a JavaScript module generated by `css-loader`. When CSS Modules are enabled, the import can contain exported identifiers (such as class name mappings) from the CSS file. If you only want to apply the styles and do not need to access any exports, you can simply write: -```js -import "./file.css"; -``` - **webpack.config.js** ```js From 0e2e2c3e1ad7f1b07619425f889ad05de92eb087 Mon Sep 17 00:00:00 2001 From: Pranjali Date: Tue, 10 Mar 2026 19:25:32 +0530 Subject: [PATCH 3/5] docs: reviewed feedback --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e0851c93..db3b43d3 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ import * as css from "./file.css"; When using `css-loader`(https://github.com/webpack/css-loader), webpack processes the file through configured [loaders] (https://webpack.js.org/concepts/loaders/) and turns it into a JavaScript module. -The imported value is not a native `CSSStyleSheet`. Instead, it is a JavaScript module generated by `css-loader`. When CSS Modules are enabled, the import can contain exported identifiers (such as class name mappings) from the CSS file. +Depending on the configuration, the imported value can expose information from the CSS file, such as exported identifiers when CSS Modules are enabled. If you only want to apply the styles and do not need to access any exports, you can simply write: From 676801b381e8a7cd35361dec6e4dc1b6ccaf9889 Mon Sep 17 00:00:00 2001 From: Pranjali Date: Tue, 10 Mar 2026 19:41:53 +0530 Subject: [PATCH 4/5] docs: clarify behavior --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7f24493b..621645f9 100644 --- a/README.md +++ b/README.md @@ -58,10 +58,14 @@ import * as css from "./file.css"; When using `css-loader`(https://github.com/webpack/css-loader), webpack processes the file through configured [loaders] (https://webpack.js.org/concepts/loaders/) and turns it into a JavaScript module. -Depending on the configuration, the imported value can expose information from the CSS file, such as exported identifiers when CSS Modules are enabled. +The imported value is a JavaScript module generated by `css-loader`. When CSS Modules are enabled, this module can export identifiers from the CSS file (such as class name mappings). If you only want to apply the styles and do not need to access any exports, you can simply write: +```js +import "./file.css"; +``` + **webpack.config.js** ```js From 25609d1aa4ed93cb2909385daf5ce7f850ca3b4d Mon Sep 17 00:00:00 2001 From: Pranjali Date: Wed, 11 Mar 2026 16:37:14 +0530 Subject: [PATCH 5/5] docs: updated --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 621645f9..d147a517 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ import * as css from "./file.css"; When using `css-loader`(https://github.com/webpack/css-loader), webpack processes the file through configured [loaders] (https://webpack.js.org/concepts/loaders/) and turns it into a JavaScript module. -The imported value is a JavaScript module generated by `css-loader`. When CSS Modules are enabled, this module can export identifiers from the CSS file (such as class name mappings). +The imported value is a JavaScript module generated by `css-loader`. When CSS Modules are enabled, the import can include exported identifiers from the CSS file (such as class name mappings). If you only want to apply the styles and do not need to access any exports, you can simply write: