CSS

CSS 的解析和轉換由 Lightning CSS 處理。

全域 CSS

在 Turbopack 中內建將 CSS 導入全域範圍的功能。

my-file.tsx

import './globals.css';

CSS Modules

Turbopack 會處理 CSS Modules。任何副檔名為 .module.css 的檔案都會被視為 CSS 模組，您可以將其導入 JavaScript 或 TypeScript 檔案中。

component.tsx

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

這遵循 Next.js 設定的相同規則，讓您可以輕鬆區分全域 CSS 和範圍 CSS。

CSS 巢狀

Turbopack 會處理 CSS 巢狀語法。這是 CSS 規格的正式一部分，讓您可以將 CSS 宣告互相巢狀。

phone.css

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

`@import` 語法

支援使用 CSS @import 語法導入其他 CSS 檔案。這讓您可以將多個 CSS 檔案合併成單一模組。

globals.css

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

PostCSS

PostCSS 讓您可以使用外掛程式來增強您的 CSS 工具鏈。它一直是將 Tailwind 和 autoprefixer 等程式庫整合到應用程式中的寶貴工具。

最常見的模式是在應用程式的根目錄中新增 postcss.config.js 檔案，您可以在其中導入和設定外掛程式。

當 Turbopack 找到 postcss.config.js 檔案時，它會自動在 Node.js 工作池中使用 PostCSS 處理您的 CSS 檔案。

postcss.config.js

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

Sass 和 SCSS

.scss 和 .sass 檔案讓您可以使用 Sass 語言。

目前在使用 Turbopack 的 Next.js 中支援 Sass。

未來直接使用 Turbopack 時，可能會透過外掛程式/載入器提供此功能。

Less

.less 檔案讓您可以使用 Less 語言。

未來可能會透過外掛程式/載入器提供此功能。

Tailwind CSS

Tailwind CSS 可以透過 PostCSS 外掛程式使用。您可以使用官方的 Tailwind Next.js 指南開始使用。

CSS