CSS

CSSバンドリングは、swc_cssと呼ばれるRustクレートを使用するSWCによって処理されます。swc_cssは個別にドキュメント化されていませんが、Turbopackに統合されており、いくつかのCSS機能をサポートしています。

グローバルCSS

グローバルスコープへのCSSのインポートは、Turbopackで**すぐに利用可能**です。

import './globals.css';

CSS Modules

TurbopackはCSS Modulesをすぐに処理します。.module.css拡張子のファイルはCSSモジュールとみなされ、JavaScriptまたはTypeScriptファイルにインポートできます。

import cssExports from './phone.module.css'

これはNext.js (新しいタブで開きます)で定められているのと同じルールに従います。これにより、グローバルCSSとスコープ付きCSSを簡単に区別できます。

postcss-nested

Turbopackはpostcss-nested (新しいタブで開きます)構文をすぐに処理します。この便利なライブラリを使用すると、CSS宣言を互いにネストできます。

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
        body.is_dark & {
            color: white;
        }
    }
    img {
        display: block;
    }
}

@import構文

他のCSSファイルをインポートするためのCSSの@import構文を使用すると、**すぐに利用可能**になります。これにより、複数のCSSファイルを1つのモジュールに結合できます。

@import './modal.css';
@import './dark.css';

PostCSS

PostCSSを使用すると、プラグインを使用してCSSツールチェーンを強化できます。Tailwindやautoprefixerなどのライブラリをアプリケーションに統合するための貴重なツールとなっています。

最も一般的なパターンは、アプリケーションのルートにpostcss.config.jsファイルを追加することです。ここで、プラグインをインポートして構成できます。

Turbopackはpostcss.config.jsファイルを見つけると、Node.jsワーカープールでPostCSSを使用してCSSファイルを自動的に処理します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

SCSSとLESS

.scssと.lessファイルを使用すると、さまざまな方法でCSSを拡張するSCSSとLESSを使用できます。これらの言語は、Turbopackでは現在**すぐに使用できません**。

これらは将来、プラグインを介して利用できるようになる可能性があります。

Tailwind CSS

Tailwind CSSはPostCSSプラグインを介して使用できます。公式Tailwind Next.jsガイド (新しいタブで開きます)を使用して開始できます。