升级一些 css 相关加载器后“Import * as”不起作用

Question

我将以下软件包升级到最新版本：

包名	项目中的当前版本	升级版（最新版本）
迷你 CSS 提取插件	0.8.2	2.8.0
postcss-浏览器-报告器	0.5.0	0.7.0
postcss-导入	11.1.0	16.0.1
postcss-loader	4.3.0	8.1.0
postcss 嵌套	3.0.0	6.0.1
postcss-记者	5.0.0	7.1.0
css-loader	3.5.3	6.10.0

这些升级是作为 webpack 5 升级的一部分完成的。之后我可以看到

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

不起作用。

当我将其转换为

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

时，它可以正常工作。有人可以帮助理解为什么

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

不再起作用了。

Answer 1

在 webpack 4 及更早版本中，当您使用

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

时，它将导入包含 CSS 文件中所有样式的对象。然而，从 webpack 5 开始，这种行为已经改变了。

在 webpack 5 中，当你使用

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

时，它默认将 CSS 文件视为模块，并通过模块的默认导出来访问样式。这意味着您应该使用

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

来获取默认导出（其中包含样式）。

在 webpack 4 中：

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

在 webpack 5 中：

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

此更改是为了与 ES 模块规范保持一致，并提供更一致和可预测的 CSS 模块使用方式。