更新依赖后React组件导入SCSS返回undefined的解决方法

我在React组件中通过import colors from './../../colors.scss'导入SCSS文件，更新项目依赖后，colors的值变为undefined。当前webpack已配置node-sass、css-loader、mini-css-extract-plugin等工具，配置代码如下：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader',
    },
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
    },
    {
      test: /\.scss$/,
      use: [
        { loader: 'style-loader' },
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
          },
        },
        { loader: 'postcss-loader' },
        {
          loader: 'sass-loader',
          options: {},
        },
      ],
      exclude: [path.resolve(config.srcDir, 'styles')],
      include: [config.srcDir],
    },
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        {
          loader: 'sass-loader',
          options: {},
        },
      ],
      include: [path.resolve(config.srcDir, 'styles')],
    },
  ],
}

需求是调整配置，实现像以下示例一样导入SCSS样式并作为值访问：

const parentClass = classNames(
    'avatar-font',
    `avatar-font--${avatarProps.size}`,
    bgColor && colors[`bg-color--${ bgColor }`]
  )

return <div className={ parentClass }></div>

当前依赖版本：

"webpack": "^5.77.0",
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^5.0.0",
"postcss-loader": "^7.2.4",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2"

核心问题 #

1. style-loader与MiniCssExtractPlugin冲突：二者作用互斥（一个注入样式到DOM，一个提取为独立文件），同时使用会导致模块导出异常。
2. 全局样式的css-loader配置缺失：styles目录下的SCSS规则未开启模块导出，无法生成类名映射对象。
3. 依赖兼容性问题：sass-loader v13+已不再支持node-sass，需替换为维护中的dart-sass（sass包）。

具体修复步骤 #

1. 修复Loader冲突

移除第一个SCSS规则中的style-loader，或根据环境动态选择loader（开发环境用style-loader做热更新，生产环境用MiniCssExtractPlugin提取文件）：

const isDev = process.env.NODE_ENV === 'development';

// 修改第一个SCSS规则
{
  test: /\.scss$/,
  use: [
    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
      },
    },
    { loader: 'postcss-loader' },
    { loader: 'sass-loader' },
  ],
  exclude: [path.resolve(config.srcDir, 'styles')],
  include: [config.srcDir],
}

2. 调整全局样式的css-loader配置

给styles目录下的SCSS规则开启模块导出，确保能生成类名映射：

{
  test: /\.scss$/,
  use: [
    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        modules: {
          mode: 'local',
          localsConvention: 'camelCase', // 可选，支持驼峰式访问类名
        },
        importLoaders: 1,
      },
    },
    { loader: 'postcss-loader' },
    { loader: 'sass-loader' },
  ],
  include: [path.resolve(config.srcDir, 'styles')],
}

3. 替换node-sass为sass

卸载已废弃的node-sass，安装兼容的sass包：

npm uninstall node-sass
npm install sass --save-dev

4. 确认导入方式

css-loader默认开启esModule: true，可使用以下两种导入方式：

// 默认导入
import colors from './../../colors.scss';
// 命名导入（更稳妥）
import * as colors from './../../colors.scss';

若需兼容旧的默认导入逻辑，可在css-loader中添加esModule: false配置。

验证效果 #

修改配置后重新构建项目，即可正常通过colors['bg-color--xxx']访问SCSS中定义的类名，实现示例中的业务逻辑。

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