CSS#

CSSはRspackにおいて第一級市民であり、RspackはCSSバンドルをサポートするための組み込み機能をいくつか備えています。

CSSサポートの有効化#

以下のオプションから選択できます

ネイティブCSSサポート#

Rspackは、experiment.css オプションを提供しています。これは、webpack 5で導入されたネイティブCSSサポートを有効にするための実験的な機能です。Rspackはこの機能を改善し、Rspack 2.0でデフォルトで有効にする予定です。

Rspackに基づいて新しいプロジェクトを作成する場合は、この方法を使用することをお勧めします。

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

experiment.cssを有効にすると、Rspackは次の3つのモジュールタイプをサポートします。これらは、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ファイルとして扱う場合は、次のようにします。

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 add css-loader -D

• 設定の追加

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から移行する方法については、移行ガイド を参照してください。

style-loaderの使用#

Rspackは、css-loader と style-loader を使用して、<style> タグを介してCSSを挿入することをサポートしています。この方法では、スタンドアロンCSSファイルは生成されず、CSSコンテンツがJSファイルにインライン化されます。

• css-loaderとstyle-loaderのインストール

npm add css-loader style-loader -D

• 設定の追加

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

CSS Modules#

デフォルトでは、Rspackは *.module.css 拡張子を持つファイルを CSS Modules として扱います。 これらをJavaScriptファイルにインポートし、CSSファイルで定義された各クラスにモジュールからのエクスポートとしてアクセスできます。

.red {
  color: red;
}

名前空間インポートを使用できます

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を使用する場合、名前空間のインポートと名前付きインポートに加えて、デフォルトのインポートですべてのスタイルモジュールをインポートできます。

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 add postcss postcss-loader -D

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 によって処理されます。 出力はCSS後処理のためにRspackに渡されます。

Sass#

Rspackは sass-loader をサポートしており、次のように設定できます。

npm add sass-embedded sass-loader -D

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 によって実行され、結果の出力はCSS後処理のためにRspackに渡されます。

Less#

Rspackは less-loader をサポートしており、次のように設定できます。

npm add less less-loader -D

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 によって実行され、生成された結果はCSS後処理のためにRspackに渡されます。

Tailwind CSS#

Tailwind CSS は、ユーティリティファーストのCSSフレームワークであり、マークアップで直接あらゆるデザインを構築するために構成できるクラスが満載されています。

Tailwind CSSをPostCSSプラグインとしてインストールするのが、Rspackと統合する最もシームレスな方法です。

Tailwind CSSのインストール#

プロジェクトに tailwindcss、autoprefixer、postcss、 postcss-loader をインストールしてください。

npm add tailwindcss autoprefixer postcss postcss-loader -D

Tailwind CSSの設定#

インストールが完了したら、rspack.config.js で postcss-loader を設定してCSSファイルを処理し、tailwindcss を postcssOptions.plugins に追加する必要があります。

.css ファイルを処理するための設定例を以下に示します。 .scss または .less ファイルを処理する必要がある場合は、この例を参考に修正できます。

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

これで、RspackでTailwind CSSを使用するために必要なビルド設定が完了しました。

次に、Tailwind CSSドキュメント の手順に従って、Tailwind CSSに必要な設定とコードを追加し、使用を開始してください。