On This Page

在 GitHub 上编辑本页

CSS

CSS 由 SWC 使用一个叫作 swc_css 的 cate 构建，目前这个 cate 还未单独开放文档，但它将与 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 语法，你可以使用这个 library 编写嵌套 CSS：

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

@import 语法

Turbopack 开箱支持 @import 语法来的导入其它 CSS 文件，这样你就可以将多个 CSS 合并成一个 CSS 模块：

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

Turbopack 目前不支持通过 URI 导入 CSS，例如 @import "https://example.com/stylesheet.css"。你可以通过在 HTML 文档添加 <link rel="stylesheet" href="https://example.com/stylesheet.css" /> 曲线救国，对于 Next.js 开发者应该将其添加至 pages/_document.js。

PostCSS

PostCSS 可以让你通过插件来拓展 CSS 工具链，这对于引入类似 Tailwind 和 autoprefixer 这样的 library 大有裨益。

最常见的做法是在应用的根目录创建 postcss.config.js 文件，然后在这个文件导入和配置插件。

目前我们暂不支持这种方式来使用 PostCSS 插件，我们打算最后将其原生支持，或通过 Turbopack 插件支持。

变通使用 PostCSS

我们推荐另外使用 PostCSS CLI，作为变通方式。

npm install --save-dev postcss postcss-cli concurrently
package.json
{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"postcss input.css --output output.css --watch\"",
    "build": "postcss input.css --output output.css && next build"
  }
}

SCSS 和 LESS

.scss 和 .less 文件能够让你使用 SCSS 和 LESS 语言以各种方式增强 CSS，目前 Turbopack 暂未原生支持这些语言。

在未来，我们很可能会通过插件来获取支持。

Tailwind CSS

我们目前仍未开箱支持 Tailwind CSS，由于它本身可以作为一个 PostCSS 插件，我们很可能通过插件系统来支持 Tailwind CSS。

它目前可以通过一个附加的进程导入：

npm install --save-dev tailwindcss autoprefixer concurrently
package.json
{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input input.css --output output.css --watch\"",
    "build": "tailwindcss input.css --output output.css && next build"
  }
}
框架开发服务器