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 將會在單一終端機視窗中並行執行指定的指令。