跳到主要内容
版本:0.15

@farmfe/js-plugin-less

支持 Less 编译

Installation

npm install @farmfe/js-plugin-less less

Usage

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

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

Options

export type LessPluginOptions = {
lessOptions?: Less.Options;
implementation?: string;
filters?: {
resolvedPaths?: string[];
moduleTypes?: string[];
};
additionalData?:
| string
| ((context?: string, resolvePath?: string) => string | Promise<string>);
};

lessOptions

请参阅Less 选项

Example:

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

const config: UserConfig = {
plugins: [
farmJsPluginLess({
lessOptions: {
paths: [path.resolve(process.cwd(), 'styles')]
}
})
]
}

export default config;

filters

哪些文件应该由 less 处理。 默认为“ {resolvedPaths: ['\\.less$'] }”用于加载,“{ moduleTypes: ['less'] }”用于转换。

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

resolvedPathsmoduleTypes 取并集。

Example:

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

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

export default config;

implementation

lessimplementation 包名称。 默认为 less

additionalData

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

要添加到每个 less 文件的附加数据。示例:

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

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

Less 文件:

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

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

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

.foo {
color: @primary-color;
}

函数形式用法:

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

const config: UserConfig = {
plugins: [
farmJsPluginLess({
// add variables.less to every less file
additionalData: (content, resolvePath) => {
if (resolvePath === '/path/to/index.less') {
return `
@import "./src/styles/variables.less";
`;
}
}
})
]
}
Extremely Fast Web Build Tool Written in Rust

Copyright © 2024 Farm Community. Built with Docusaurus.