webpack: export ‘Abc’ (imported as ‘style’) was not found in ‘./style.scss’ (possible exports: default)

967次阅读
没有评论

共计 660 个字符,预计需要花费 2 分钟才能阅读完成。

提醒:本文最后更新于2025-07-07 14:39,文中所关联的信息可能已发生改变,请知悉!

最近将 webpack 开发模式下对 scss 的处理增加了 style-loader,然后构建过程中会出现类似如下警告信息:

ModuleDependencyWarning: export ‘default’ (imported as ‘style’) was not found in ‘./style.scss’ (possible exports: default)

出现该提示涉及的具体源码类似如下:

import * as style from './style.scss';
console.log(style.Abc);

在 webpack 的 github issues 里搜索到了类似问题:

https://github.com/webpack/webpack/issues/12558

其中主要指出其原因为 esModule 的问题。将 options.esModule 设置为 false 即可。

再结合 style-loader 官方 README.md 中的 esModule 参数介绍可以得知, esModule 参数默认为 true,在实际的构建过程中可以得到 tree-shaking 的效果。

于是可以有如下两种解决方法:

方法一:

import * as xxx from './xxx.css' 改为 import { Abc } from './xxx.css' 方式。

方法二:

设置 esModule 参数为 false,改为使用 CommonJS modules 模式。示例:

{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
options: {
esModule: false,
},
},
]
}

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2022-08-16发表,共计660字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码