171 字
1 分钟
解决 css-loader v7 下 import styles 为 undefined 的问题
升级 css-loader 到 v7 后，原本正常运行的代码突然报错：
import styles from './index.css'console.log(styles) // undefined问题原因
css-loader v7 严格遵循 ES 模块规范，改变了默认导出行为。旧版默认导出 CSS 类名对象，v7 不再提供默认导出。
解决方案
方法一：修改导入语法
将默认导入改为命名空间导入：
// ❌ v7 不再支持import styles from './index.css'
// ✅ 正确写法import * as styles from './index.css'方法二：配置恢复旧版行为
修改 webpack.config.js：
{ loader: 'css-loader', options: { modules: { namedExport: false // 关闭命名导出，恢复默认导出 } }}配置后即可继续使用 import styles from './index.css'。
注意一下 exportLocalsConvention 这个参数
如果 CSS 类名使用短横线（如 my-class），代码中驼峰引用（如 styles.myClass），需要额外配置：
modules: { namedExport: false, exportLocalsConvention: 'camelCase' // my-class -> myClass}如果不配置这个，styles.myClass 就是 undefined。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
解决 css-loader v7 下 import styles 为 undefined 的问题
http://mizuki.heycheems.top/posts/解决_css-loader_v7_下_import_styles_为_undefined_的问题/ 部分信息可能已经过时
相关文章 智能推荐