Skip to content

docs: clarify esModule option usage #1650

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
alwaysalearner1234 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: clarify esModule option usage #1650

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a945f5
Update README with ES module usage details
alwaysalearner1234 Jan 28, 2026
0d6f8ce
Update README with ES modules benefits
alwaysalearner1234 Feb 1, 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
18 changes: 17 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1759,6 +1759,20 @@ Default: `true`

By default, `css-loader` generates JS modules that use the ES modules syntax.

This means you can import CSS using standard ES `import` syntax, which is the
recommended approach for modern JavaScript applications and frameworks
like React, Vue, and Angular.

Set `esModule: false` only if your environment expects CommonJS syntax
(for example, when using `require()` instead of `import`).

Using ES modules can be beneficial in some scenarios, such as module concatenation
and more consistent optimizations in modern JavaScript tooling. However,
tree-shaking may also work with CommonJS depending on the bundler configuration.
The `esModule` option primarily controls the export syntax generated by `css-loader`,
rather than enabling or disabling optimizations by itself.


There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).

You can enable CommonJS module syntax using:
Expand All @@ -1780,7 +1794,7 @@ module.exports = {
},
};
```

hh
### `exportType`

Type:
Expand Down Expand Up @@ -2336,6 +2350,8 @@ import * as styles from "Component.module.scss";
// Somewhere in JavaScript canvas drawing code use the variable directly
// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
ctx.fillStyle = `${svars.colorBackgroundCanvas}`;

kjk
```

## Contributing
Expand Down