此版本的 stylelint-webpack-plugin 仅适用于 webpack 5。对于 webpack 4,请参阅 2.x 分支。
此插件使用 stylelint
,它可以帮助您避免错误并在样式中强制执行约定。
首先,您需要安装 stylelint-webpack-plugin
npm install stylelint-webpack-plugin --save-dev
或
yarn add -D stylelint-webpack-plugin
或
pnpm add -D stylelint-webpack-plugin
注意:
如果您尚未安装,还需要从 npm 安装
stylelint >= 13
npm install stylelint --save-dev
或
yarn add -D stylelint
或
pnpm add -D stylelint
注意:
如果您使用的是 Stylelint 13 而不是 14+,您可能还需要将
@types/stylelint
安装为开发依赖项,以获取与 stylelint 相关的类型错误。
然后将插件添加到您的 webpack 配置中。例如
const StylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [new StylelintPlugin(options)],
// ...
};
请参阅 stylelint 的选项 以获取可用的完整选项列表。这些选项直接传递给 stylelint
。
cache
type cache = boolean;
true
默认情况下启用缓存以减少执行时间。
cacheLocation
type cacheLocation = string;
node_modules/.cache/stylelint-webpack-plugin/.stylelintcache
指定缓存位置的路径。可以是文件或目录。
configFile
type context = string;
undefined
指定 stylelint
要使用的配置文件位置。
注意
默认情况下,这是 由
stylelint
处理。
context
type context = string;
compiler.context
表示文件根目录的字符串。
exclude
type exclude = string | Array<string>;
['node_modules', compiler.options.output.path]
指定要排除的文件和/或目录。必须相对于 options.context
。
extensions
type extensions = string | Array<string>;
['css', 'scss', 'sass']
指定应检查的扩展名。
files
type files = string | Array<string>;
null
指定目录、文件或 glob。必须相对于 options.context
。将递归遍历目录,查找与 options.extensions
匹配的文件。文件和 glob 模式会忽略 options.extensions
。
fix
type fix = boolean;
false
如果为 true
,stylelint
将修复尽可能多的错误。修复将应用于实际源文件。将报告所有未修复的错误。请参阅 自动修复错误 文档。
formatter
type formatter = string | (
results: Array<import('stylelint').LintResult>
) => string
'string'
指定要用于设置结果格式的格式化程序。请参阅 格式化程序选项。
lintDirtyModulesOnly
type lintDirtyModulesOnly = boolean;
false
仅对已更改的文件进行 linting,在开始时跳过 linting。
stylelintPath
type stylelintPath = string;
stylelint
将用于 linting 的 stylelint
实例的路径。
threads
type threads = boolean | number;
false
设置为 true 以根据 CPU 数量自动选择池大小。设置为大于 1 的数字以设置显式池大小。设置为 false、1 或更小以禁用,并且仅在主进程中运行。
默认情况下,插件将根据 stylelint 错误/警告数量自动调整错误报告。您仍然可以使用 emitError
或 emitWarning
选项强制执行此行为
emitError
type emitError = boolean;
true
始终会发出找到的错误,要禁用,请设置为 false
。
emitWarning
type emitWarning = boolean;
true
始终会发出警告,若要禁用,请设置为 false
。
failOnError
type failOnError = boolean;
true
如果存在任何错误,将导致模块构建失败,若要禁用,请设置为 false
。
failOnWarning
type failOnWarning = boolean;
false
如果设置为 true
,如果存在任何警告,将导致模块构建失败。
quiet
type quiet = boolean;
false
如果设置为 true
,将仅处理和报告错误,而忽略警告。
outputReport
type outputReport =
| boolean
| {
filePath?: string | undefined;
formatter?:
| (
| string
| ((results: Array<import('stylelint').LintResult>) => string)
)
| undefined;
};
false
将错误输出写入文件,例如用于报告的 json
文件。filePath
相对于 webpack 配置:output.path
。如果未传入,则可以使用不同的格式化程序传入输出文件,否则将使用默认/已配置的格式化程序。
{
filePath: 'path/to/file';
formatter: 'json';
}