PostCSS

本文档仅在使用 Classic Remix 编译器时适用。如果你使用的是 Remix Vite，请使用 PostCSS 内置于 Vite 支持。

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

¥PostCSS is a popular tool with a rich plugin ecosystem, commonly used to prefix CSS for older browsers, transpile future CSS syntax, inline images, lint your styles and more. When a PostCSS config is detected, Remix will automatically run PostCSS across all CSS in your project.

例如，要使用自动前缀，请先安装 PostCSS 插件。

¥For example, to use Autoprefixer, first install the PostCSS plugin.

npm install -D autoprefixer

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

¥Then add a PostCSS config file in the Remix root referencing the plugin.

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

如果你使用的是 Vanilla Extract，由于它已经充当了 CSS 预处理器的角色，你可能需要应用一组与其他样式不同的 PostCSS 插件。为了支持此功能，你可以从 PostCSS 配置文件中导出一个函数，该函数会赋予一个上下文对象，用于告知你 Remix 何时正在处理 Vanilla Extract 文件。

¥If you're using Vanilla Extract, since it's already playing the role of CSS preprocessor, you may want to apply a different set of PostCSS plugins relative to other styles. To support this, you can export a function from your PostCSS config file which is given a context object that lets you know when Remix is processing a Vanilla Extract file.

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 Preprocessors

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

¥You can use CSS preprocessors like LESS and SASS. Doing so requires running an additional build process to convert these files to CSS files. This can be done via the command line tools provided by the preprocessor or any equivalent tool.

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

¥Once converted to CSS by the preprocessor, the generated CSS files can be imported into your components via the Route Module links export function, or included via side effect imports when using CSS bundling, just like any other CSS file in Remix.

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

¥To ease development with CSS preprocessors, you can add npm scripts to your package.json that generate CSS files from your SASS or LESS files. These scripts can be run in parallel alongside any other npm scripts that you run for developing a Remix application.

一个使用 SASS 的示例。

¥An example using SASS.

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

¥First, you'll need to install the tool your preprocessing uses to generate CSS files.
```
npm add -D sass
```
将 npm 脚本添加到 package.json 的 scripts 部分，并使用已安装的工具生成 CSS 文件。

¥Add an npm script to your package.json's scripts section that uses the installed tool to generate CSS files.
```
{
  // ...
  "scripts": {
    // ...
    "sass": "sass --watch app/:app/"
  }
  // ...
}
```
上述示例假设 SASS 文件将存储在 app 文件夹中的某个位置。

¥The above example assumes SASS files will be stored somewhere in the app folder.

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

¥The --watch flag included above will keep sass running as an active process, listening for changes to or for any new SASS files. When changes are made to the source file, sass will regenerate the CSS file automatically. Generated CSS files will be stored in the same location as their source files.
运行 npm 脚本。

¥Run the npm script.
```
npm run sass
```
这将启动 sass 进程。运行进程会检测任何新的 SASS 文件或现有 SASS 文件的更改。

¥This will start the sass process. The running process will detect any new SASS files or changes to existing SASS files.

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

¥You might want to use something like concurrently to avoid needing two terminal tabs to generate your CSS files and also run remix dev.
```
npm add -D concurrently
```
```
{
  "scripts": {
    "dev": "concurrently \"npm run sass\" \"remix dev\""
  }
}
```
运行 npm run dev 将在单个终端窗口中并行运行指定的命令。

¥Running npm run dev will run the specified commands in parallel in a single terminal window.