PostCSS

このコンテンツはまだ日本語訳がありません。

PostCSS

本文档仅在使用 Classic 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 预处理器

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

一旦由预处理器转换为 CSS，生成的 CSS 文件就可以通过 Route Module links export 函数导入到你的组件中，或者在使用 CSS bundle 时通过 side effect imports 包含在内，就像 Remix 中的任何其他 CSS 文件一样。

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

一个使用 SASS 的示例。

首先，您需要安装预处理器用于生成 CSS 文件的工具。

npm add -D sass

将 npm 脚本添加到你的 package.json 的 scripts 部分，该脚本使用已安装的工具生成 CSS 文件。
package.json
```
{
  // ...
  "scripts": {
    // ...
    "sass": "sass --watch app/:app/"
  }
  // ...
}
```

上面的例子假设 SASS 文件将存储在 app 文件夹中的某个位置。

上面包含的 --watch 标志将使 sass 作为活动进程运行，监听对 SASS 文件的更改或任何新的 SASS 文件。当对源文件进行更改时，sass 将自动重新生成 CSS 文件。生成的 CSS 文件将存储在与其源文件相同的位置。

运行 npm 脚本。

npm run sass

这将启动 sass 进程。任何新的 SASS 文件或对现有 SASS 文件的更改都将被正在运行的进程检测到。

您可能需要使用类似 concurrently 之类的东西来避免需要两个终端选项卡来生成 CSS 文件并运行 remix dev。

npm add -D 并发

{
  "scripts": {
    "dev": "concurrently \"npm run sass\" \"remix dev\""
  }
}

运行 npm run dev 将在单个终端窗口中并行运行指定的命令。