Css/Sass/Less

Farm 支持开箱即用的 CSS 编译，例如：

tsx

import './index.css';

然后 Farm 会自动为 css 模块启用 HMR，并自动打包 Css。

CSS Modules

Farm 默认支持 css modules，以 .module.css|less|scss|sass 结尾的模块默认将被视为 Css Modules。

comp.tsx

import styles from './index.module.css'

export function Comp() {
  return <div className={styles.main}>Main</div>
}

index.module.css

.main {
  color: red;
}

您可以通过 css.modules 配置 CSS 模块。例如，您可以将 css.modules.paths 设置为 ['.css|sass|less|scss']，那么所有 css 文件将被视为 css 模块。

CSS Modules 本地类名转换

Farm 支持通过 css.modules.localsConversion 转换 CSS 模块类名的命名规范。可用模式：

asIs — 类名按原样导出（默认）
lowerCamel — 类名转换为小驼峰，例如 foo-bar 变为 fooBar
upperCamel — 类名转换为大驼峰，例如 foo-bar 变为 FooBar
snake — 类名转换为 snake_case，例如 foo-bar 变为 foo_bar

farm.config.ts

import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    css: {
      modules: {
        localsConversion: 'lowerCamel',
      }
    }
  }
})

将 CSS 转换为 Script

Farm 支持通过 css.transformToScript 将 CSS 转换为 JavaScript 模块。启用后，CSS 模块将被编译为导出类名映射并在运行时注入样式的 JS 代码。

farm.config.ts

import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    css: {
      transformToScript: true,
    }
  }
})

CSS 预处理器

Farm 官方提供了 sass、less、postcss 插件。

Sass

Farm Sass 插件是一个 Rust 插件，底层使用纯 Rust 编写的 grass。

在 Farm 中编译 sass/scss 模块的步骤如下：

安装依赖

# npm 或者 yarn 或者 pnpm，使用任意你喜欢的包管理器 
npm install @farmfe/plugin-sass

配置插件

import type { UserConfig } from '@farmfe/core';
import sass from '@farmfe/plugin-sass';

export default <UserConfig> {
  // ...
  plugins: [sass()] // 像 JS 插件一样导入并以工厂函数形式调用
  // 如果你希望配置 plugin-sass 的参数，可以使用如下形式的配置
  // plugins: [
  //   sass({ sourceMap: false })
  // ]
};

导入sass模块

import './index.scss';

如果要将 sass 与 css modules 一起使用，请将文件名从 index.scss 更改为 index.module.scss，请参阅 css modules。

@farmfe/plugin-sass 支持很多选项，将选项对象传给工厂函数即可：

import type { UserConfig } from '@farmfe/core';
import sass from '@farmfe/plugin-sass';

export default <UserConfig> {
  plugins: [
    sass({
      sourceMap: true, // bool
      sourceMapIncludeSources: true, // bool
      alertAscii: true, // bool
      alertColor: true, // bool
      charset: true, // bool
      quietDeps: true, // bool
      verbose: false, // bool
      style: 'expanded' | 'compressed' // output code style
    })
  ]
};

Less

Farm less 插件是一个 Js 插件。在 Farm 中编译 less 模块的步骤如下：

安装依赖

# npm or yarn or pnpm, choose your favorite package manager
npm install @farmfe/js-plugin-less

配置插件

import type { UserConfig } from '@farmfe/core';
import less from '@farmfe/js-plugin-less';

export default <UserConfig> {
  // ...
  plugins: [less()] // pass argument to the less function like `less({ /* your options */ })` to specify less options
};

导入 Less 模块

import './index.less';

要将 less 与 css modules 一起使用，请将文件名从 index.less 更改为 index.module.less，参考 css modules

Postcss

Farm postcss 插件是一个 JS 插件，在 Farm 中引入 postcss 的步骤如下：

安装依赖

# npm or yarn or pnpm, choose your favorite package manager
npm install @farmfe/js-plugin-postcss

配置插件

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

export default <UserConfig> {
  // ...
  plugins: [postcss()] // pass argument to the less function like `less({ /* your options */ })` to specify less options
};

配置 postcss.config.js，引入需要的 postcss 插件

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16,
      propList: ['*'],
    }),
  ]
}

TailwindCSS

Farm 提供了专用的 @farmfe/js-plugin-tailwindcss 插件，用于集成 TailwindCSS v4。该插件直接使用原生 Tailwind v4 编译器，无需 postcss.config.js。

安装依赖

pnpm add -D @farmfe/js-plugin-tailwindcss tailwindcss

配置插件

farm.config.ts

import { defineConfig } from '@farmfe/core';
import tailwindcss from '@farmfe/js-plugin-tailwindcss';

export default defineConfig({
  plugins: [tailwindcss()],
});

在 CSS 入口文件中添加 Tailwind 指令

index.css

@import "tailwindcss";

在入口文件中导入 CSS

main.ts

import './index.css';

配置完成后，Farm 会自动扫描源文件中使用的 Tailwind 工具类，并生成对应的 CSS。

过滤扫描文件

默认情况下，插件会扫描除 node_modules 以外的所有文件。你可以通过 filters 选项限制扫描范围：

farm.config.ts

import { defineConfig } from '@farmfe/core';
import tailwindcss from '@farmfe/js-plugin-tailwindcss';

export default defineConfig({
  plugins: [
    tailwindcss({
      filters: {
        resolvedPaths: ['src/'],
      },
    }),
  ],
});

Css Prefixer

Farm 支持开箱即用的 css prefixer，您可以使用compilation.css.prefixer对其进行配置。

farm.config.ts

import type { UserConfig } from '@farmfe/core';

function defineConfig(config: UserConfig) {
   return config;
}

export default defineConfig({
   compilation: {
     css: {
       prefix: {
        targets: ['ie >= 10']
       }
     },
   },
});

对于输入代码

css

div {
  display: flex;
}

输出

css

div{display:-ms-flexbox;display:flex}