Css/Sass/Less

Farm support Css out of box, just import the css file:

Then farm will auto enable HMR for css module, and generating bundled resources for css.

Css Modules

Farm support css modules out of box, the modules end with .module.css|less|scss|sass will be treated as css modules by default.

comp.tsx

index.module.css

You can configuring css modules by css.modules. for example you can set css.modules.paths to ['.css|sass|less|scss'] then all css files will be treated as css modules.

Css Pre-Processor

Farm provide official sass, less, postcss plugins to support css pre-processor.

Sass

Farm sass plugin is a Rust Plugin and use sass-embeded(we may migrate to grass in the future).

Steps to compile sass/scss modules in Farm.

1. Install dependencies

2. Configure the plugin

3. Import sass module

To use sass with css modules, change the file name from index.scss to index.module.scss, see css modules.

@farmfe/plugin-sass supports a lot of options, use the array syntax of plugins to specify options for plugin sass:

Less

Farm less plugin is a Js Plugin. Steps to compile less modules in Farm.

1. Install dependencies

2. Configure the plugin

3. Import sass module

To use sass with css modules, change the file name from index.less to index.module.less, see css modules

Postcss

The Farm postcss plugin is a JS plugin. The steps to introduce postcss in Farm are as follows:

1. Install dependencies

2. Configure the plugin

3. Configure postcss.config.js and import the required postcss plugins

Css Prefixer

Farm supports css prefixer out of box, you can configure it using compilation.css.prefixer.

note

css.prefix.targets will be set automatically when output.targetEnv. Normally set output.targetEnv would be enough.

farm.config.ts

Then for input code:

output code: