---
title: "Css/Sass/Less"
locale: "zh"
version: "current"
canonicalUrl: "https://farmfe.org/zh/docs/features/css"
publicationStatus: "prerelease"
---

<a id="csssassless"></a>
# Css/Sass/Less


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


```tsx
import './index.css';
```


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


<a id="css-modules"></a>
## CSS Modules


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


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

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


```css
.main {
  color: red;
}
```


您可以通过 [` css.modules `](</zh/docs/config/compilation-options#cssmodules>) 配置 CSS 模块。 例如，您可以将 ` css.modules.paths ` 设置为 ` ['.css|sass|less|scss'] `，那么所有 css 文件将被视为 css 模块。


<a id="css-modules-本地类名转换"></a>
### CSS Modules 本地类名转换


Farm 支持通过 [` css.modules.localsConversion `](</zh/docs/config/compilation-options#cssmoduleslocalsconversion>) 转换 CSS 模块类名的命名规范。可用模式：


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


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

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


<a id="将-css-转换为-script"></a>
### 将 CSS 转换为 Script


Farm 支持通过 [` css.transformToScript `](</zh/docs/config/compilation-options#csstransformtoscript>) 将 CSS 转换为 JavaScript 模块。启用后，CSS 模块将被编译为导出类名映射并在运行时注入样式的 JS 代码。


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

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


<a id="css-预处理器"></a>
## CSS 预处理器


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


<a id="sass"></a>
### Sass


Farm Sass 插件是一个 Rust 插件，底层使用纯 Rust 编写的 [` grass `](<https://github.com/connorskees/grass>)。


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


1. 安装依赖


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


2. 配置插件


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

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


3. 导入sass模块


```ts
import './index.scss';
```


如果要将 ` sass ` 与 ` css modules ` 一起使用，请将文件名从 ` index.scss ` 更改为 ` index.module.scss `，请参阅 [css modules](</zh/docs/features/css#css-modules>)。


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


```ts
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
    })
  ]
};
```


<a id="less"></a>
### Less


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


1. 安装依赖


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


2. 配置插件


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


3. 导入 Less 模块


```ts
import './index.less';
```


要将 ` less ` 与 ` css modules ` 一起使用，请将文件名从 ` index.less ` 更改为 ` index.module.less `，参考 [css modules](</zh/docs/features/css#css-modules>)


<a id="postcss"></a>
### Postcss


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


1. 安装依赖


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


2. 配置插件


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


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


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


<a id="tailwindcss"></a>
### TailwindCSS


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


1. 安装依赖


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


2. 配置插件


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

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


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


```css
@import "tailwindcss";
```


4. 在入口文件中导入 CSS


```ts
import './index.css';
```


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



> [!TIP]
> 提示
> 
> ` @farmfe/js-plugin-tailwindcss ` 适用于 **TailwindCSS v4**。如果需要使用 TailwindCSS v3，请改用 ` @farmfe/js-plugin-postcss `，并在 ` postcss.config.js ` 中引入 ` require('tailwindcss') `。



<a id="过滤扫描文件"></a>
#### 过滤扫描文件


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


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

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


<a id="css-prefixer"></a>
## Css Prefixer


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


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