"Import * as" not working after upgraing some css related loaders

Question

I upgraded the following packages to their latest versions:

package name	current version in project	upgraded version(latest version)
mini-css-extract-plugin	0.8.2	2.8.0
postcss-browser-reporter	0.5.0	0.7.0
postcss-import	11.1.0	16.0.1
postcss-loader	4.3.0	8.1.0
postcss-nested	3.0.0	6.0.1
postcss-reporter	5.0.0	7.1.0
css-loader	3.5.3	6.10.0

These upgrades were done as part of webpack 5 upgrade. After this I can see that import * as css from './some-file.css' is not working.

When I convert it to import css from './some-file.css' its working properly. Can someone help in understanding why import * as css from './some-file.css' is not working anymore.

Answer 1

In webpack 4 and earlier, when you used import * as css from './some-file.css', it would import an object containing all the styles from the CSS file. However, starting from webpack 5, this behavior has been changed.

In webpack 5, when you use import * as css from './some-file.css', it treats the CSS file as a module by default, and the styles are accessed through the default export of the module. This means you should use import css from './some-file.css' to get the default export (which contains the styles).

In webpack 4:

import * as css from './some-file.css';

In webpack 5:

import css from './some-file.css';

This change was made to align with the ES module specification and provide a more consistent and predictable way to work with CSS modules.