@farmfe/js-plugin-postcss

支持 postcss 的前置编译工作

Installation

npm

npm install @farmfe/js-plugin-postcss postcss

yarn

yarn add @farmfe/js-plugin-postcss postcss

pnpm

pnpm add @farmfe/js-plugin-postcss postcss

Usage

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

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

Options

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;
};

postcssLoadConfig

Farm 使用 postcss-load-config 来加载 postcss 配置，因此您可以使用 postcss-load-config 的选项。 参考postcss-load-config。

示例：

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;

filters

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

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

resolvedPaths 和 moduleTypes 取并集。

例子:

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;

implementation

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