---
title: "@farmfe/js-plugin-postcss"
locale: "zh"
version: "1.x"
canonicalUrl: "https://farmfe.org/zh/docs/1.x/plugins/official-plugins/js-postcss"
publicationStatus: "prerelease"
---

<a id="farmfejs-plugin-postcss"></a>
# @farmfe/js-plugin-postcss


支持 ` postcss ` 的前置编译工作


<a id="installation"></a>
## Installation


**npm**

```javascript
npm install @farmfe/js-plugin-postcss postcss
```


**yarn**

```javascript
yarn add @farmfe/js-plugin-postcss postcss
```


**pnpm**

```javascript
pnpm add @farmfe/js-plugin-postcss postcss
```



<a id="usage"></a>
## Usage


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginPostcss from '@farmfe/js-plugin-postcss';

const config: UserConfig = {
  plugins: [
    farmJsPluginPostcss({ /* options */ })
  ]
}
```


<a id="options"></a>
## Options


```ts
export type PostcssPluginOptions = {
  /**
   * @default undefined
   * postcss-load-config options. path default to farm.config.js root.
   */
  postcssLoadConfig?: {
    ctx?: postcssLoadConfig.ConfigContext;
    path?: string;
    options?: Parameters<typeof postcssLoadConfig>[2];
  };
  filters?: {
    resolvedPaths?: string[];
    moduleTypes?: string[];
  };
  implementation?: string;
};

```


<a id="postcssloadconfig"></a>
### postcssLoadConfig


Farm 使用 ` postcss-load-config ` 来加载 ` postcss ` 配置，因此您可以使用 ` postcss-load-config ` 的选项。 参考[postcss-load-config](<https://github.com/postcss/postcss-load-config>)。


示例：


```ts
import path from 'node:path';
import { UserConfig } from '@farmfe/core';
import farmJsPluginPostcss from '@farmfe/js-plugin-postcss';

const config: UserConfig = {
  plugins: [
    farmJsPluginPostcss({
      postcssLoadConfig: {
        // load config from client/postcss.config.js
        path: path.join(process.cwd(), 'client')
      }
    })
  ]
}

export default config;
```


<a id="filters"></a>
### filters


哪些文件应该由` postcss `处理。 默认为 ` { moduleTypes: ['css'] } `。


- ` resolvedPaths `: 仅处理这些路径下的文件。 支持正则表达式。
- ` moduleTypes `：仅处理具有这些模块类型的文件。 请注意，less/sass 文件应首先由 ` @farmfe/js-plugin-less `/` @farmfe/plugin-sass ` 处理。


` resolvedPaths ` 和 ` moduleTypes ` 取并集。


例子:


```ts
import { UserConfig } from '@farmfe/core';
import farmJsPluginPostcss from '@farmfe/js-plugin-postcss';

const config: UserConfig = {
  plugins: [
    farmJsPluginPostcss({
      filters: {
        // all files end with .custom-css will be processed
        resolvedPaths: ['\\.custom-css$'],
        moduleTypes: ['css']
      }
    })
  ]
}

export default config;
```


<a id="implementation"></a>
### implementation


` postcss ` 的 ` implementation ` 包名称。 默认为 ` postcss `。