Css/Sass/Less

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

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

CSS Modules

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

comp.tsx

index.module.css

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

CSS 预处理器

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

Sass

Farm Sass 插件是一个 Rust 插件，使用 sass-embeded（后面我们可能会迁移到纯 Rust 编写的 grass）。

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

1. 安装依赖

2. 配置插件

3. 导入sass模块

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

@farmfe/plugin-sass 支持很多选项，使用 plugins 的数组配置指定插件 sass 的选项：

Less

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

1. 安装依赖

2. 配置插件

3. 导入 Less 模块

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

Postcss

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

1. 安装依赖

2. 配置插件

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

Css Prefixer

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

farm.config.ts

对于输入代码

输出