CSS

CSS 解析和转换由 Lightning CSS 处理。

全局 CSS

Turbopack 内置了将 CSS 导入全局范围的功能。

my-file.tsx

import './globals.css';

CSS 模块

Turbopack 可以处理 CSS 模块。任何带有 .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 语言。

目前，在使用 Next.js 和 Turbopack 时，支持 Sass。

将来直接使用 Turbopack 时，可能会通过插件/加载器提供此功能。

Less

.less 文件允许您使用 Less 语言。

将来可能会通过插件/加载器提供此功能。

Tailwind CSS

Tailwind CSS 可以通过 PostCSS 插件使用。您可以使用官方 Tailwind Next.js 指南开始使用。

CSS