English | 简体中文

Support compiling Sass/Scss in Farm.

Install @farmfe/js-plugin-sass by your favorite package manager(npm, yarn, pnpm and so on):

npm i @farmfe/js-plugin-sass --save-dev # or pnpm/yarn add @farmfe/js-plugin-sass -D

Configuring the plugin in farm.config.ts:

import { defineFarmConfig } from '@farmfe/core/dist/config';
import Sass from '@farmfe/js-plugin-sass'; //  import the plugin

export default defineFarmConfig({
  compilation: {
    input: {
      index: './index.html',
    },
    output: {
      path: './build',
    },
  },
  plugins: [
    // use the sass plugin.
    Sass({
      // custom options here
    }),
  ],
});

Type: string | undefined

Default: undefined

Specify the executor of the sass file (such as sass, sass-embedded), if not defined, the file in node_module will be searched by default.

Type: string[]

Default: ["\\.s[ac]ss$"]

Specifies the matching files.

Type: string[]

Default: []

Reads the contents from a file and injects them into each sass/scss file. It is typically used to inject some global variables

Note that normal css should not be written in this file, otherwise it will inject them repeatedly into each compiled css file

Type: string | undefined

Default: undefined

It has the same function as globals, but it can be conveniently used to inject some simple sass/scss content

Type: boolean

Default: false

Whether to generate sourceMap

If not set, it will read the compilation.sourcemap configuration in the farm configuration

Type: StringOptions<'async'>

Default: {}