Skip to main content
Version: 1.0.0

@farmfe/js-plugin-sass

Support sass for Farm.

Installation​

npm install @farmfe/js-plugin-sass sass

Usage​

import { UserConfig } from '@farmfe/core';
import farmJsPluginSass from '@farmfe/js-plugin-sass';

const config: UserConfig = {
plugins: [
farmJsPluginSass({ /* options */ })
]
}

Options​

export type SassPluginOptions = {
sassOptions?: StringOptions<'async'>;
filters?: {
resolvedPaths?: string[];
moduleTypes?: string[];
};

/**
* - relative or absolute path
* - globals file will be added to the top of the sass file
* - when file changed, the file can't be hot-reloaded
*
* relative to project root or cwd
*/
implementation?: string | undefined;
globals?: string[];
additionalData?:
| string
| ((content?: string, resolvePath?: string) => string | Promise<string>);
};

sassOptions​

Sass options. See sass options for more details.

Example:

import path from 'node:path';
import { UserConfig } from '@farmfe/core';
import farmJsPluginSass from '@farmfe/js-plugin-sass';

const config: UserConfig = {
plugins: [
farmJsPluginSass({
sassOptions: {
loadPaths: [path.resolve(process.cwd(), 'styles')]
}
})
]
}

export default config;

filters​

Which files should be processed by sass. Default to { resolvedPaths: ['\\.(s[ac]ss)$'] } for load and { moduleTypes: ['sass'] } for transform.

  • resolvedPaths: Only files under these paths will be processed. Support regex.
  • moduleTypes: Only files with these module types will be processed.

resolvedPaths and moduleTypes are unioned, which means files match any of them will be processed.

Example:

import { UserConfig } from '@farmfe/core';
import farmJsPluginSass from '@farmfe/js-plugin-sass';

const config: UserConfig = {
plugins: [
farmJsPluginSass({
filters: {
// all files end with .custom-css will be processed
resolvedPaths: ['\\.custom-sass$'],
moduleTypes: ['sass']
}
})
]
}

export default config;

implementation​

implementation package name of sass. Default to sass. If you want to use sass-embedded, you can set it to sass-embedded.

import { UserConfig } from '@farmfe/core';
import farmJsPluginSass from '@farmfe/js-plugin-sass';

const config: UserConfig = {
plugins: [
farmJsPluginSass({
implementation: 'sass-embedded'
})
]
}
note

You should install sass-embedded manually.

additionalData​

type AdditionalDataOption = string | ((content?: string, resolvePath?: string) => string | Promise<string>);

Additional data to be added to every sass file. Example:

import { UserConfig } from '@farmfe/core';
import farmJsPluginSass from '@farmfe/js-plugin-sass';

const config: UserConfig = {
plugins: [
farmJsPluginSass({
// add variables.sass to every sass file
additionalData: `
@import "./src/styles/variables.scss";
`
})
]
}

For sass file:

index.scss
.foo {
color: @primary-color;
}

additionalData will be added to the top of the file:

index.scss
@import "./src/styles/variables.scss";

.foo {
color: @primary-color;
}

Function form:

import { UserConfig } from '@farmfe/core';
import farmJsPluginSass from '@farmfe/js-plugin-sass';

const config: UserConfig = {
plugins: [
farmJsPluginSass({
// add variables.sass to every sass file
additionalData: (content, resolvePath) => {
if (resolvePath === '/path/to/index.sass') {
return `
@import "./src/styles/variables.sass";
`;
}
}
})
]
}

globals​

Global sass files. These files will be added to the top of every sass file. It's the same as additionalData but more convenient.

Extremely Fast Web Build Tool Written in Rust

Copyright Š 2024 Farm Community. Built with Docusaurus.