Skip to content

docs: clarify behavior of importing CSS from JavaScript #1655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pranjalisr wants to merge 6 commits into
base: main
Choose a base branch
from
Open

docs: clarify behavior of importing CSS from JavaScript #1655

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d622278
docs: clarify behavior of importing CSS from JavaScript
pranjalisr Mar 9, 2026
4220ff9
docs: address feedback
pranjalisr Mar 9, 2026
0e2e2c3
docs: reviewed feedback
pranjalisr Mar 10, 2026
8822772
Merge branch 'main' into fix-css1
pranjalisr Mar 10, 2026
676801b
docs: clarify behavior
pranjalisr Mar 10, 2026
25609d1
docs: updated
pranjalisr Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Copy Markdown
Member

@evenstensberg evenstensberg Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove pipeline, and link to our docs page where loaders are documented.

Copy link
Copy Markdown
Contributor Author

@pranjalisr pranjalisr Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


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.
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In some cases yes, so it is wrong


If you only want to apply the styles and do not need to access any exports, you can simply write:
Copy link
Copy Markdown
Member

@evenstensberg evenstensberg Mar 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesnt reference anything

Copy link
Copy Markdown
Contributor Author

@pranjalisr pranjalisr Mar 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated to reference imported module clearly


```js
import "./file.css";
Comment thread
evenstensberg marked this conversation as resolved.
```

**webpack.config.js**
Expand Down