英语

简体中文

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。它们的功能和选项基本相同。

安装 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 迁移。

提示

CssExtractRspackPlugin 不能与 type: 'css'、type: 'css/auto' 或 type: 'css/module' 一起使用，因为这些类型由 experiments.css 提供。

使用 style-loader

Rspack 支持使用 css-loader 和 style-loader 通过 <style> 标签注入 CSS。此方法不会生成独立的 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',
      },
    ],
  },
};

提示

style-loader 不能与 type: 'css'、type: 'css/auto' 或 type: 'css/module' 一起使用，因为这些类型由 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: {
                // ...
              },
            },
          },
        ],
        // set to 'css/auto' if you want to support '*.module.css' as CSS Modules, otherwise set type to '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: {
              // 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',
      },
    ],
  },
};

上面的配置会将所有 *.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: {
              // ...
            },
          },
        ],
        // set to 'css/auto' if you want to support '*.module.less' as CSS Modules, otherwise set type to '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 文件，然后将 tailwindcss 添加到 postcssOptions.plugins 中。

以下是如何处理 .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。

本页内容

CSS#

启用 CSS 支持#

原生 CSS 支持#

使用 CssExtractRspackPlugin#

使用 style-loader#

CSS Modules#

PostCSS#

Sass#

Less#

Tailwind CSS#

安装 Tailwind CSS#

配置 Tailwind CSS#

CSS

启用 CSS 支持

原生 CSS 支持

使用 CssExtractRspackPlugin

使用 style-loader

CSS Modules

PostCSS

Sass

Less

Tailwind CSS

安装 Tailwind CSS

配置 Tailwind CSS