Vue-cli项目导入CSS后styles为空对象/undefined问题求助

首先得明确：你遇到的问题核心是Vue CLI默认不会把普通.css文件当作CSS Modules处理，所以直接导入后不会得到类名映射对象，而你看到的use()/unuse()是非常老旧的webpack css-loader用法，现在已经被废弃了。

为什么会出现空对象/undefined？ #

Vue CLI对CSS文件的默认处理逻辑是：

• 普通.css文件：导入时会直接将样式全局注入到页面中，但不会导出任何内容，所以import styles from './test.css'里的styles是空对象，自然访问styles.className会得到undefined。
• 只有文件名带.module后缀的CSS文件（比如test.module.css），Vue CLI才会自动启用CSS Modules功能，此时导入才会返回编译后的类名映射对象。

解决办法 #

方法1：单个文件启用CSS Modules（推荐）

把你的test.css重命名为test.module.css，然后在main.js里正常导入：

import styles from './test.module.css'

console.log(styles) // 现在能看到类名映射了
console.log(styles.yourClassName) // 输出编译后的唯一类名

此时你的CSS类会被编译成类似test-yourClassName-xxxx的唯一名称，避免样式冲突，同时可以通过styles对象访问这些类名。

方法2：全局开启CSS Modules（不推荐，除非全项目都需要）

如果你想让所有.css文件都默认启用CSS Modules，可以在项目根目录新建/修改vue.config.js，添加如下配置：

module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          // 自定义类名编译规则，可选
          localIdentName: '[name]-[local]-[hash:base64:5]'
        }
      }
    }
  }
}

注意：全局开启后，如果你需要写全局样式，得用:global()包裹类名：

/* 全局样式 */
:global(.global-style) {
  color: red;
}

/* 局部样式（默认） */
.local-style {
  color: blue;
}

补充说明 #

你之前参考的CSS Modules核心逻辑是对的，但Vue CLI做了一层封装，默认只对.module.css后缀的文件启用该功能，这是为了兼顾全局样式和模块化样式的使用场景，避免开发者不小心把所有样式都模块化了。

内容的提问来源于stack exchange，提问作者ex3xeng