This version of
stylelint-webpack-plugin
only works with webpack 5. For webpack 4, see the2.x branch.
This plugin usesstylelint
, which helps you avoid errors and enforce conventions in your styles.
To begin, you'll need to installstylelint-webpack-plugin
:
npm install stylelint-webpack-plugin --save-dev
or
yarn add -D stylelint-webpack-plugin
or
pnpm add -D stylelint-webpack-plugin
[!NOTE]
You also need to install
stylelint >= 13
from npm, if you haven't already:
npm install stylelint --save-dev
or
yarn add -D stylelint
or
pnpm add -D stylelint
[!NOTE]
If you are using Stylelint 13 rather than 14+, you might also need to install
@types/stylelint
as a dev dependency if you encounter Stylelint-related type errors.
Then add the plugin to your webpack configuration. For example:
const StylelintPlugin=require('stylelint-webpack-plugin');module.exports={// ... plugins:[newStylelintPlugin(options)],// ...};
Seestylelint's options for the complete list of available options . These options are passed directly tostylelint
.
cache
typecache=boolean;
true
The cache is enabled by default to decrease execution time.
cacheLocation
typecacheLocation=string;
node_modules/.cache/stylelint-webpack-plugin/.stylelintcache
Specify the path to the cache location. This can be a file or a directory.
configFile
typecontext=string;
undefined
Specify the config file location to be used bystylelint
.
Note:
By default this ishandled by
stylelint
.
context
typecontext=string;
compiler.context
A string indicating the root of your files.
exclude
typeexclude=string|Array<string>;
['node_modules', compiler.options.output.path]
Specify the files and/or directories to exclude. Must be relative tooptions.context
.
extensions
typeextensions=string|Array<string>;
['css', 'scss', 'sass']
Specify the extensions that should be checked.
files
typefiles=string|Array<string>;
null
Specify directories, files, or globs. Must be relative tooptions.context
. Directories are traversed recursively, looking for files matchingoptions.extensions
. File and glob patterns ignoreoptions.extensions
.
fix
typefix=boolean;
false
Iftrue
,stylelint
will fix as many errors as possible. The fixes are made to the actual source files. All unfixed errors will be reported. SeeAutofixing errors docs.
formatter
typeformatter=string|( results:Array<import('stylelint').LintResult>)=>string
'string'
Specify the formatter you would like to use to format your results. See theformatter option.
lintDirtyModulesOnly
typelintDirtyModulesOnly=boolean;
false
Lint only changed files; skip linting on start.
stylelintPath
typestylelintPath=string;
stylelint
Path tostylelint
instance that will be used for linting.
threads
typethreads=boolean|number;
false
Set totrue
for an auto-selected pool size based on number of CPUs. Set to a number greater than 1 to set an explicit pool size.
Set tofalse
, 1, or less to disable and run only in main process.
By default, the plugin will automatically adjust error reporting depending on the number of Stylelint errors/warnings.
You can still force this behavior by using theemitError
oremitWarning
options:
emitError
typeemitError=boolean;
true
The errors found will always be emitted. To disable, set tofalse
.
emitWarning
typeemitWarning=boolean;
true
The warnings found will always be emitted. To disable, set tofalse
.
failOnError
typefailOnError=boolean;
true
Will cause the module build to fail if there are any errors. To disable, set tofalse
.
failOnWarning
typefailOnWarning=boolean;
false
Will cause the module build to fail if there are any warnings, when set totrue
.
quiet
typequiet=boolean;
false
Will process and report errors only, and ignore warnings, when set totrue
.
outputReport
typeoutputReport=|boolean|{ filePath?:string|undefined; formatter?:|(|string|((results:Array<import('stylelint').LintResult>)=>string))|undefined;};
false
Writes the output of the errors to a file - for example, ajson
file for use for reporting.
ThefilePath
is relative to the webpack config:output.path
.
You can pass in a different formatter for the output file. If none is passed in the default/configured formatter will be used.
{ filePath:'path/to/file'; formatter:'json';}
We welcome all contributions!If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.