Typescript+Webpack构建SCSS Module失败问题求助

核心问题：Loader执行顺序错误 #

Webpack的loader是**从右到左（从下到上）**执行的，你的配置把style-loader放在了最前面，导致sass-loader去处理style-loader生成的JS代码（而非原始SCSS文件），这就触发了Sass语法错误——Sass不识别JS的import语句。

同时，css-modules-typescript-loader需要放在css-loader之后，用来根据css-loader输出的模块信息生成Typescript类型。

修正后的Webpack配置 #

调整loader为正确的执行顺序，同时修正正则表达式的转义问题：

{
  test: /\.module\.(sass|scss)$/,
  exclude: /node_modules/,
  use: [
    'style-loader', // 最后执行：将编译后的CSS注入DOM
    'css-modules-typescript-loader', // 生成TS类型声明
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]', // 可选：自定义类名编译格式
        },
        importLoaders: 1, // 告知css-loader：在它之前有1个loader（sass-loader）需要处理@import的文件
      },
    },
    'sass-loader', // 最先执行：编译SCSS为普通CSS
  ],
}

额外检查项 #

1. 区分普通SCSS与SCSS Module：如果项目中同时存在非Module的SCSS文件，需添加单独的Rule处理，避免冲突：

// 处理普通SCSS（非Module）
{
  test: /\.(sass|scss)$/,
  exclude: [/node_modules/, /\.module\.(sass|scss)$/], // 排除Module文件
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ],
}

2. 确认依赖安装完整：确保所有必要依赖已安装：

npm install --save-dev style-loader css-loader sass-loader sass css-modules-typescript-loader

验证修正 #

保持TSX中的导入方式不变：

import styles from './test.module.scss';

<div className={styles.testStyle}>hello</div>

重新构建后，应该能正常编译，且Typescript可正确识别styles对象的类型。

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