共计 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, | |
}, | |
}, | |
] | |
} | |
正文完
发表至: 前端开发
2022-08-16