Css/Sass/Less

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

tsx

import './index.css';

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

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

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

index.module.css

.main {
  color: green;
}

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 powered by grass.

Steps to compile sass/scss modules in Farm.

Install dependencies

# npm or yarn or pnpm, choose your favorite package manager
pnpm add -D @farmfe/plugin-sass

Configure the plugin

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

export default defineConfig({
  // ...
  plugins: ['@farmfe/plugin-sass'] // to use a rust plugin, just configure its package name as a string
  // if you want to specify options for plugin-sass, use
  // plugins: [
  //   ['@farmfe/plugin-sass', { sourceMap: false }]
  // ]
});

Import sass module

import './index.scss';

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:

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

export default defineConfig({
  // if you want to specify options for plugin-sass, use
  plugins: [
    [
      '@farmfe/plugin-sass',
      // all supported options as below
      {
        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 plugin is a Js Plugin. Steps to compile less modules in Farm.

Install dependencies

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

Configure the plugin

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

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

Import sass module

import './index.less';

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:

Install dependencies

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

Configure the plugin

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

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

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

postcss.config.js

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

Css Prefixer

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

farm.config.ts

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

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

Then for input code:

css

div {
  display: flex;
}

output code:

css

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