5月27日 16:55

Rspack 如何处理 CSS？

Rspack 将 CSS 视为一等公民，内置了完整的 CSS 处理能力，无需像 Webpack 那样依赖 css-loader 和 style-loader。理解 Rspack 的 CSS 处理机制，是从 Webpack 迁移或新建项目时的关键知识。

CSS 模块类型

Rspack 通过 module.rules 中的 type 字段来区分 CSS 的处理方式，支持四种模块类型：

类型	说明
`css/auto`	根据文件名自动判断：`*.module.css` 视为 CSS Modules，其余视为普通 CSS
`css`	普通 CSS，不启用 CSS Modules
`css/global`	以全局作用域模式解析 CSS Modules
`css/module`	强制启用 CSS Modules

从 Rspack 0.6.0 起，*.css 文件默认类型从 css 变更为 css/auto，这意味着 style.css 和 style.module.css 可以在同一项目中自动区分处理，无需额外配置：

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: 'css/auto', // 默认值，可省略
      },
    ],
  },
};

CSS Modules

Rspack 内置支持 CSS Modules，无需 css-loader。以 .module.css 结尾的文件会被自动识别：

css
/* index.module.css */
.container {
  display: flex;
}
.active {
  color: red;
}

在 JavaScript 中通过命名空间导入使用：

js
import * as styles from './index.module.css';

// 使用
document.querySelector('.'app').className = styles.container;

也支持命名导入：

js
import { active } from './index.module.css';

如果需要默认导入（import styles from './index.module.css'），需要关闭 namedExports：

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/i,
        type: 'css/auto',
        use: [{
          loader: 'css-loader',
          options: { modules: { namedExports: false } },
        }],
      },
    ],
  },
};

CSS 提取到独立文件

生产环境通常需要将 CSS 提取到独立文件。Rspack 提供了内置的 CssExtractRspackPlugin，替代 Webpack 中的 mini-css-extract-plugin：

js
import { rspack } from '@rspack/core';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: 'css/auto',
      },
    ],
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[id].[contenthash].css',
    }),
  ],
};

注意：CssExtractRspackPlugin 与 Rspack 内置 CSS 类型（css/auto、css、css/module）配合使用，不需要像 Webpack 那样在 loader 链中手动注入提取 loader。

如果项目仍依赖 css-loader，可以使用传统方式：

js
import { rspack } from '@rspack/core';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        type: 'javascript/auto', // 覆盖内置 CSS 类型
        use: [
          rspack.CssExtractRspackPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({}),
  ],
};

CSS 预处理器

Rspack 通过对应的 loader 支持主流 CSS 预处理器，处理结果交给 Rspack 内置 CSS 引擎进行后处理。

Sass/SCSS

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s(?:a|c)ss$/,
        type: 'css/auto', // 自动识别 *.module.scss
        use: ['sass-loader'],
      },
    ],
  },
};

Less

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        type: 'css/auto', // 自动识别 *.module.less
        use: ['less-loader'],
      },
    ],
  },
};

Stylus

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        type: 'css/auto',
        use: ['stylus-loader'],
      },
    ],
  },
};

关键区别：与 Webpack 不同，Rspack 不需要在 loader 链中加入 css-loader 和 style-loader，预处理器 loader 的输出直接由 Rspack 内置 CSS 引擎接管。

PostCSS 与 Tailwind CSS 集成

Rspack 通过 postcss-loader 集成 PostCSS 生态，这是接入 Tailwind CSS 等工具的标准方式。

基础 PostCSS 配置

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        type: 'css/auto',
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                  require('cssnano')({ preset: 'default' }),
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

也可以使用独立的 postcss.config.js 配置文件：

js
// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions'],
    }),
  ],
};

Tailwind CSS v4 集成

Tailwind CSS v4 采用了新的 PostCSS 插件架构：

bash
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader -D

js
// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

js
// rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['postcss-loader'],
        type: 'css',
      },
    ],
  },
};

CSS 优化

Rspack 内置了 CSS 优化能力，生产模式下默认启用：

代码压缩：Rspack 使用内置压缩器处理 CSS，也可以通过 CssMinimizerPlugin 自定义压缩策略：

js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
      }),
    ],
  },
};

Tree Shaking：Rspack 在内置 CSS 处理中支持未使用 CSS 的移除，分析 JavaScript 中的类名引用，只保留实际使用的样式规则。

代码分割：配合 splitChunks 可以将 CSS 按策略拆分：

js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          type: 'css/mini-extract',
          name: 'styles',
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

从 Webpack 迁移 CSS 配置

迁移时需要注意的核心差异：

移除 css-loader 和 style-loader：Rspack 内置了 CSS 处理，这两个 loader 不再需要
替换 mini-css-extract-plugin：使用内置的 rspack.CssExtractRspackPlugin
设置模块类型：通过 type: 'css/auto' 替代 loader 链方式控制 CSS Modules 行为
experiments.css：在 Rspack 2.0 中内置 CSS 支持默认启用，旧版本可通过 experiments: { css: true } 开启

js
// Webpack 配置 → Rspack 配置
// 之前：
// { test: /\.css$/, use: ['style-loader', 'css-loader'] }

// 之后：
{ test: /\.css$/i, type: 'css/auto' }

这种简化得益于 Rspack 用 Rust 实现的内置 CSS 解析管线，避免了 Webpack 中多 loader 串联的性能开销。

标签：Rspack