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 將支援以下三種模組類型，您可以使用 type 在 rule 上進行設定

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