使用CSS Module导入SCSS模块后styles为undefined的问题求助

核心原因分析 #

你遇到的问题大概率是webpack规则匹配冲突或者CSS Modules规则范围设置不当导致的：

• 若你是在现有脚手架（比如CRA、Vue CLI）基础上修改webpack配置，直接用push添加的scss规则会排在默认规则之后，webpack会优先匹配前面的默认规则，导致你的自定义Modules配置根本没生效。
• 给所有.scss文件强制开启CSS Modules，可能和项目中其他非模块的scss文件处理逻辑冲突，反而影响了模块文件的导出。

解决方案 #

1. 精准区分模块与非模块SCSS文件

修改webpack配置，分别为带.module.scss后缀的文件和普通scss文件设置规则，避免相互干扰：

// 仅处理带.module后缀的SCSS文件（启用CSS Modules）
config.module.rules.push({
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    },
    'sass-loader'
  ]
})

// 处理普通SCSS文件（不启用Modules）
config.module.rules.push({
  test: /^((?!\.module).)*\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
})

// 保留原有的css规则
config.module.rules.push({
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
})

2. 确保自定义规则优先匹配（针对有默认规则的场景）

如果项目原本就有处理scss的默认规则，不要用push（会把新规则放到数组末尾），而是用unshift把自定义规则放到最前面，确保webpack优先匹配：

// 把模块规则放到规则数组最前面
config.module.rules.unshift({
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    },
    'sass-loader'
  ]
})

3. 验证loader版本兼容性

你的依赖版本是兼容的：

• css-loader@7.1.2、style-loader@4.0.0、sass-loader@16.0.0都适配webpack 5，无需降级或升级。

验证方法 #

修改配置后重启webpack服务，导入模块后打印styles：

import styles from './landing.module.scss'
console.log(styles)

如果输出包含类名映射的对象，说明配置生效；如果还是undefined，检查文件路径是否正确，或者用webpack --stats detailed查看规则匹配日志，确认你的.module.scss文件是否命中了正确的loader规则。

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