PostCSS

此文档仅在使用经典 Remix 编译器时相关。如果您使用的是Remix Vite，则对PostCSS 的支持已内置于 Vite 中。

PostCSS 是一款流行的工具，拥有丰富的插件生态系统，通常用于为旧版浏览器添加 CSS 前缀、转换未来的 CSS 语法、内联图像、检查样式等等。当检测到 PostCSS 配置时，Remix 会自动在项目中的所有 CSS 上运行 PostCSS。

例如，要使用Autoprefixer，首先安装 PostCSS 插件。

npm install -D autoprefixer

然后在 Remix 根目录中添加一个 PostCSS 配置文件，引用该插件。

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

如果您使用的是Vanilla Extract，由于它已经扮演了 CSS 预处理器的角色，您可能希望相对于其他样式应用一组不同的 PostCSS 插件。为了支持这一点，您可以从 PostCSS 配置文件中导出一个函数，该函数会接收一个上下文对象，该对象可以告知您 Remix 何时正在处理 Vanilla Extract 文件。

module.exports = (ctx) => {
  return ctx.remix?.vanillaExtract
    ? {
        // PostCSS plugins for Vanilla Extract styles...
      }
    : {
        // PostCSS plugins for other styles...
      };
};

可以通过在 remix.config.js 中将 postcss 选项设置为 false 来禁用内置的 PostCSS 支持。

CSS 预处理器

您可以使用 LESS 和 SASS 等 CSS 预处理器。这样做需要运行额外的构建过程来将这些文件转换为 CSS 文件。这可以通过预处理器提供的命令行工具或任何等效工具来完成。

一旦预处理器将其转换为 CSS，生成的 CSS 文件可以通过路由模块 links 导出函数导入到您的组件中，或者在使用 CSS 捆绑时通过副作用导入包含，就像 Remix 中的任何其他 CSS 文件一样。

为了简化使用 CSS 预处理器的开发，您可以将 npm 脚本添加到您的 package.json 中，这些脚本会从您的 SASS 或 LESS 文件生成 CSS 文件。这些脚本可以与您为开发 Remix 应用程序而运行的任何其他 npm 脚本并行运行。

使用 SASS 的示例。

首先，您需要安装预处理器使用的工具来生成 CSS 文件。
```
npm add -D sass
```
将 npm 脚本添加到 package.json 的 scripts 部分，使用安装的工具生成 CSS 文件。
```
{
  // ...
  "scripts": {
    // ...
    "sass": "sass --watch app/:app/"
  }
  // ...
}
```
以上示例假设 SASS 文件将存储在 app 文件夹中的某个位置。

上面包含的 --watch 标志将使 sass 保持运行状态，作为一个活跃的进程，监听对任何新的 SASS 文件的更改。当源文件发生更改时，sass 将自动重新生成 CSS 文件。生成的 CSS 文件将存储在与其源文件相同的位置。
运行 npm 脚本。
```
npm run sass
```
这将启动 sass 进程。任何新的 SASS 文件或对现有 SASS 文件的更改都将被正在运行的进程检测到。

您可能希望使用 concurrently 之类的东西，以避免需要两个终端选项卡来生成 CSS 文件并运行 remix dev。
```
npm add -D concurrently
```
```
{
  "scripts": {
    "dev": "concurrently \"npm run sass\" \"remix dev\""
  }
}
```
运行 npm run dev 将在单个终端窗口中并行运行指定的命令。