CSS

CSS 打包由 SWC 处理，使用名为 swc_css 的 Rust 库。我们还没有单独记录 swc_css，但它已集成到 Turbopack 中，并支持多种 CSS 功能

全局 CSS

在 Turbopack 中，导入到全局范围的 CSS 开箱即用。

import './globals.css';

CSS 模块

Turbopack 开箱即用地处理 CSS 模块。任何扩展名为 .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 @import 语法导入其他 CSS 文件 开箱即用。这使您能够将多个 CSS 文件组合成一个模块

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

PostCSS

PostCSS 使您能够使用插件来增强 CSS 工具链。它一直是将 Tailwind 和 autoprefixer 等库集成到应用程序中的宝贵工具。

最常见的模式是在应用程序的根目录中添加一个 postcss.config.js 文件，您可以在其中导入和配置插件。

当 Turbopack 找到一个 postcss.config.js 文件时，它将自动使用 PostCSS 在 Node.js 工作池中处理您的 CSS 文件。

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

SCSS 和 LESS

.scss 和 .less 文件允许您使用 SCSS 和 LESS - 这些语言以各种方式增强了 CSS。这些语言 目前无法 在 Turbopack 中开箱即用。

这些语言很可能在将来通过插件提供。

Tailwind CSS

Tailwind CSS 可以通过 PostCSS 插件使用。您可以使用 官方 Tailwind Next.js 指南 (在新标签页中打开) 开始使用。