CSS

CSS 是 Rspack 的一等公民，Rspack 内置了多种能力来支持 CSS 打包。

开启 CSS 支持

你可以从以下方式中进行选择：

原生 CSS 支持

Rspack 提供了 experiment.css 选项，这是从 webpack 5 开始引入的实验性功能，用于开启 CSS 原生支持。Rspack 进一步完善了该功能，并计划在 Rspack 2.0 默认开启它。

如果你基于 Rspack 创建了一个新项目，那么推荐使用该方式。

rspack.config.js

module.exports = {
  experiments: {
    css: true,
  },
};

开启 experiment.css 后，Rspack 将支持以下三种模块类型，你可以在 rule 上通过 type 来设置它们：

css：用于处理普通的 CSS 文件。
css/module：用于处理 CSS Modules。
css/auto：基于文件扩展名自动判断是普通 CSS 文件还是 CSS Modules，*.module.css 结尾的文件视为 CSS Modules。

对于 *.css 结尾的文件，Rspack 会默认将其视为 type: 'css/auto'，你也可以通过配置 type: 'css/auto'，自定义将哪些文件视为 CSS 文件。比如，将 .less 文件视为 CSS 文件：

rspack.config.js

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

使用 CssExtractRspackPlugin

Rspack 支持使用 css-loader 和 CssExtractRspackPlugin，用于生成独立的 CSS 文件。

如果你正在迁移一个使用 mini-css-extract-plugin 的 webpack 项目，那么推荐使用 CssExtractRspackPlugin 来替换 mini-css-extract-plugin，它们的功能和配置方式基本一致。

安装 css-loader：

npm

yarn

pnpm

bun

npm add css-loader -D

添加配置：

rspack.config.js

const rspack = require('@rspack/core');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
        type: 'javascript/auto',
      },
    ],
  },
  plugins: [new rspack.CssExtractRspackPlugin({})],
};

参考迁移指南了解如何从 webpack 进行迁移。

TIP

CssExtractRspackPlugin 不能与 type: 'css'、type: 'css/auto' 或 type: 'css/module' 同时使用，因为这些 type 是由 experiments.css 提供的。

使用 style-loader

Rspack 支持使用 css-loader 和 style-loader，将 CSS 通过 <style> 标签注入。这种方式不会生成独立的 CSS 文件，而是将 CSS 的内容内联到 JS 文件中。

安装 css-loader 和 style-loader：

npm

yarn

pnpm

bun

npm add css-loader style-loader -D

添加配置：

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        type: 'javascript/auto',
      },
    ],
  },
};

TIP

style-loader 不能与 type: 'css'、type: 'css/auto' 或 type: 'css/module' 同时使用，因为这些 type 是由 experiments.css 提供的。

CSS Modules

Rspack 默认将扩展名为 *.module.css 的文件视为 CSS Modules，你可以在 JavaScript 文件中导入它，然后将 CSS 文件中定义的每个类作为模块的导出来访问。

index.module.css

.red {
  color: red;
}

你可以使用命名空间导入：

index.js

import * as styles from './index.module.css';
document.getElementById('element').className = styles.red;

也可以使用具名导入：

import { red } from './index.module.css';
document.getElementById('element').className = red;

要在 Rspack 中启用默认导入方式，你需要在 rspack.config.js 文件中将 namedExports 配置为 false。这允许你在用到 CSS Modules 时，除了命名空间导入和具名导入，也能通过默认导入整个样式模块：

rspack.config.js

module.exports = {
  module: {
    parser: {
      'css/auto': {
        namedExports: false,
      },
    },
  },
};

现在你可以使用默认导入：

import styles from './index.module.css';
document.getElementById('element').className = styles.red;

更多关于 CSS Modules 的配置请参考 module.parser.css。

PostCSS

Rspack 支持使用 postcss-loader，你可以这样配置：

npm

yarn

pnpm

bun

npm add postcss postcss-loader -D

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        // 如果你需要将 '*.module.css' 视为 CSS Modules 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
        type: 'css/auto',
      },
    ],
  },
};

上述配置会将所有 *.css 文件经过 postcss-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。

Sass

Rspack 支持使用 sass-loader，你可以这样配置：

npm

yarn

pnpm

bun

npm add sass-embedded sass-loader -D

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              // 同时使用 `modern-compiler` 和 `sass-embedded` 可以显著提升构建性能
              // 需要 `sass-loader >= 14.2.1`
              api: 'modern-compiler',
              implementation: require.resolve('sass-embedded'),
            },
          },
        ],
        // 如果你需要将 '*.module.(sass|scss)' 视为 CSS Modules 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
        type: 'css/auto',
      },
    ],
  },
};

上述配置会将所有 *.sass 和 *.scss 文件经过 sass-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。

Less

Rspack 支持使用 less-loader，你可以这样配置：

npm

yarn

pnpm

bun

npm add less less-loader -D

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              // ...
            },
          },
        ],
        // 如果你需要将 '*.module.less' 视为 CSS Modules 那么将 'type' 设置为 'css/auto' 否则设置为 'css'
        type: 'css/auto',
      },
    ],
  },
};

上述配置会将所有 *.less 文件经过 less-loader 处理，并将生成的结果交给 Rspack 完成 CSS 后续流程的处理。

Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了一系列样式类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

将 Tailwind CSS 作为 PostCSS 插件安装，是将其与 Rspack 整合的最佳方式。

安装 Tailwind CSS

在你的项目中安装 tailwindcss、autoprefixer、postcss 和 postcss-loader 这些依赖：

npm

yarn

pnpm

bun

npm add tailwindcss autoprefixer postcss postcss-loader -D

配置 Tailwind CSS

安装完成后，你需要在 rspack.config.js 中配置 postcss-loader 来处理 CSS 文件，然后在 postcssOptions.plugins 中添加 tailwindcss。

下面是一个处理 .css 文件的配置示例，如果你需要处理 .scss 或 .less 文件，可以参考该示例进行修改。

rspack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: {
                  tailwindcss: {},
                  autoprefixer: {},
                },
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

到此为止，你已经完成了在 Rspack 中使用 Tailwind CSS 所需的构建配置。

接下来你可以按照 Tailwind CSS 官方文档中的步骤，添加 Tailwind CSS 所需的配置和代码，即可开始使用。