Nx Monorepo中React+Rspack配置CSS Modules(SCSS)问题求助

核心问题分析 #

你当前的配置存在两个关键问题：

• 未区分普通SCSS和CSS Modules文件的处理逻辑，导致Nx默认规则与自定义规则冲突，样式无法正确映射
• 未配置css-loader的类名生成规则，导致出现带路径的奇怪类名

修复方案 #

1. 拆分SCSS处理规则 #

将SCSS文件分为普通SCSS和**CSS Modules（.module.scss）**两类分别处理，避免规则冲突：

2. 自定义CSS Modules类名格式 #

通过css-loader的localIdentName参数配置你需要的[原类名]--[哈希后缀]格式

修改后的完整配置 #

const {
  ModuleFederationPlugin,
} = require("@module-federation/enhanced/rspack");
const mfConfig = require("./module-federation.config");
const path = require("path");

// 处理非Module的普通SCSS文件
const regularSassRule = {
  test: /(?<!\.module)\.scss$|\.sass$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        api: "modern-compiler",
        implementation: require.resolve("sass-embedded"),
      },
    },
  ],
  type: "css",
};

// 处理CSS Modules类型的SCSS文件
const moduleSassRule = {
  test: /\.module\.scss$|\.module\.sass$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: {
          // 自定义类名：原类名 + -- + 5位哈希后缀
          localIdentName: "[local]--[hash:base64:5]",
          namedExports: false, // 禁用命名导出，保持默认的样式对象导出
        },
      },
    },
    {
      loader: "sass-loader",
      options: {
        api: "modern-compiler",
        implementation: require.resolve("sass-embedded"),
      },
    },
  ],
  type: "css/auto",
};

module.exports = composePlugins(withNx(), withReact(), (config, context) => {
  config.context = path.join(context.context.root, "apps/container");
  config.plugins.push(new ModuleFederationPlugin({ ...mfConfig, dts: false }));
  config.output.publicPath = "/";
  config.devServer = {
    ...config.devServer,
    port: 4200,
  };

  // 解析tsconfig路径
  config.resolve = {
    ...config.resolve,
    tsConfig: {
      configFile: path.resolve(
        context.context.root,
        "apps/container/tsconfig.app.json",
      ),
      references: "auto",
    },
  };

  // CSS配置
  config.experiments = { css: true };
  config.module = {
    ...config.module,
    // 过滤掉原有SCSS规则，添加新拆分的两个规则
    rules: [...config.module.rules.filter(rule => !rule.test?.test('.scss')), regularSassRule, moduleSassRule],
  };

  return config;
});

额外验证步骤 #

• 确保组件中正确导入CSS Modules：

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

// 组件内使用
<div className={styles.appBar}></div>

• 生产环境建议替换style-loader为mini-css-extract-plugin，单独提取CSS文件（避免样式嵌入JS）：

// 先安装依赖：npm install mini-css-extract-plugin --save-dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 在rule的use数组中替换style-loader
use: [
  process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
  // ...其他loader
]

// 在plugins中添加
config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }));

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