使用 Nx monorepo 和 React 设置 rspack 的 css 模块

Question

我正在尝试在使用 React、模块联合、Typescript 支持和使用 scss 的 css 模块的 Nx monorepo 中设置 Rspack。除了最后一部分，我几乎完成了所有事情。 css 模块根本无法工作。 css 类名被添加到浏览器中渲染的 html 中（使用路径和所有内容生成一个奇怪的名称），但 css 本身丢失并且不会被渲染。有人知道如何正确设置吗？我查看了 Rspack 文档，这对我有很大帮助，至少在编译时不再出现错误和警告。

这是我的 rspack.config.js：

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

const sassConfig = {
  test: /\.scss$|\.sass$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // using `modern-compiler` and `sass-embedded` together significantly improve build performance,
        // requires `sass-loader >= 14.2.1`
        api: 'modern-compiler',
        implementation: require.resolve('sass-embedded'),
      },
    },
  ],
  // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Modules, otherwise set type to 'css'
  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,
  };
  //  Resolve the paths in tsconfig
  config.resolve = {
    ...config.resolve,
    tsConfig: {
      configFile: path.resolve(
        context.context.root,
        'apps/container/tsconfig.app.json',
      ),
      references: 'auto',
    },
  };
  //  CSS setup
  config.experiments = { css: true };
  config.module = {
    ...config.module,
    rules: [...config.module.rules, sassConfig],
    parser: {
      ...config.module.parser,
      'css/auto': {
        namedExports: false,
      },
    },
  };
  return config;
});

这是在浏览器中呈现的示例：

<div class="-_src_components_Header_module_scss-ICN_appBar"></div>

我希望类名末尾带有哈希值，如“ICN_appBar--aslkfj”，但我也不知道如何在 Rspack 中进行设置。

任何帮助将不胜感激。

Answer 1

好吧，经过一周的挫折、阅读和反复试验，这是我针对上述问题找到的解决方案。它解决了：

• Rspack 的 Nx 设置
• 模块联盟设置
• tsconfig.base.json 中路径的解析
• CSS 和 SCSS 模块的设置

一路上对我有帮助的资源：

• 视频1
• 视频2
• 博客文章

RTFM：

• Rspack Docu - CSS 支持
• RSpack Docu - CSS 模块
• RSpack Docu - CSS/自动生成器

这是我的 rspack.config.js。

请注意：这适用于我的项目，我不认为这是一个完美的解决方案。如果您有其他想法或需要纠正的地方，请随时告诉我。

否则，我希望这对某人有帮助。

const { composePlugins, withNx, withReact } = require('@nx/rspack');
const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/rspack');
const mfConfig = require('./module-federation.config');
const path = require('path');

const sassConfig = {
  test: /\.scss$|\.sass$/,
  use: [
    {
      loader: 'sass-loader',
      options: {
        // using `modern-compiler` and `sass-embedded` together significantly improve build performance,
        // requires `sass-loader >= 14.2.1`
        api: 'modern-compiler',
        implementation: require.resolve('sass-embedded'),
      },
    },
  ],
  // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Modules, otherwise set type to 'css'
  type: 'css/auto',
  exclude: '/node_modules/',
};

const cssConfig = {
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
    },
  ],
  type: 'css/auto',
  exclude: '/node_modules/',
};

module.exports = composePlugins(withNx(), withReact(), (config, context) => {
  config.context = path.join(context.context.root, 'apps/container'); // Path to app
  config.plugins.push(new ModuleFederationPlugin({ ...mfConfig, dts: false }));
  config.output.publicPath = '/'; // '/' for host, 'auto' for remotes
  config.devServer = {
    ...config.devServer,
    port: 4200, // Make sure port fits to application
  };
  //  Resolve the paths in tsconfig
  config.resolve = {
    ...config.resolve,
    tsConfig: {
      configFile: path.resolve(
        context.context.root,
        'apps/container/tsconfig.app.json',
      ),
      references: 'auto',
    },
  };
  //  CSS / SCSS setup
  config.experiments = { css: true };
  config.module = {
    ...config.module,
    rules: [...config.module.rules, cssConfig, sassConfig],
    parser: {
      ...config.module.parser,
      'css/auto': {
        namedExports: false,
      },
    },
    //  Make sure naming css classes of scss modules is working
    generator: {
      ...config.module.generator,
      'css/auto': {
        localIdentName: '[local]-[id]',
        exportsConvention: 'camel-case',
      },
    },
  };
  return config;
});