跳到主要内容
版本:0.15

@farmfe/js-plugin-sass

支持 sass 编译

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 选项

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

哪些文件应该由 sass 处理。 对于 load 钩子默认为 {resolvedPaths: ['\\.(s[ac]ss)$'] }, 对于 transform 钩子默认为 { moduleTypes: ['sass'] }

  • resolvedPaths: 仅处理这些路径下的文件。 支持正则表达式。
  • moduleTypes:仅处理具有这些模块类型的文件。

resolvedPathsmoduleTypes 取并集。

示例:

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

sassimplementation 包名称。 默认为 sass。 如果你想使用sass-embedded,可以将其设置为sass-embedded

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

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

您应该手动安装 sass-embedded

additionalData

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

要添加到每个 sass 文件的附加数据。 例子:

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";
`
})
]
}

Sass 文件

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

additionalData 将会被添加到这个文件的头部:

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

.foo {
color: @primary-color;
}

函数形式用法:

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

全局 sass 文件。 这些文件将添加到每个 sass 文件的顶部。 它与 additionalData 相同,但更方便。

Extremely Fast Web Build Tool Written in Rust

Copyright © 2024 Farm Community. Built with Docusaurus.