在Webpack中配置Stylelint需通过stylelint-webpack-plugin插件实现，不参与编译仅做静态检查，支持CSS/SCSS/Less等语法，可阻断构建或转为警告，并配合lint-staged在提交前自动校验修复。
在 Webpack 中配置 Stylelint 并不是直接通过 Webpack 本身加载，而是借助 stylelint-webpack-plugin 插件，在构建过程中对 CSS、SCSS、Less 等样式文件进行静态检查。它不参与编译，只做代码质量校验，报错会阻断构建（可配置为警告）。
安装 Stylelint 及相关依赖
先全局或项目本地安装 Stylelint 和插件：
- 安装核心工具：
npm install --save-dev stylelint stylelint-webpack-plugin - 按需安装语法扩展（如用 SCSS）：
npm install --save-dev stylelint-scss - 推荐加一份常用规则集：
npm install --save-dev stylelint-config-standard
配置 Stylelint 规则文件
在项目根目录新建 .stylelintrc.js（或 .stylelintrc.json），例如：
module.exports = {
extends: ['stylelint-config-standard'],
rules: {
'no-empty-source': null,
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['tailwind', 'apply', 'layer']
}
]
},
ignoreFiles: ['**/dist/**', '**/node_modules/**']
};
注意：若用 SCSS，需在 extends 中加入 stylelint-scss，并确保已安装对应插件。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
在 Webpack 配置中接入插件
打开 webpack.config.js，引入插件并添加到 plugins 数组：
const StylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ... 其他配置
plugins: [
new StylelintPlugin({
context: 'src', // 检查路径，默认是当前目录
files: '**/*.{css,scss,sass,less,styl}', // 支持的后缀
fix: false, // 是否自动修复（谨慎开启，建议开发时设为 true，CI 设为 false）
emitErrors: true, // 构建失败时抛出错误（设为 false 则仅警告）
quiet: false // 是否隐藏无错误时的日志
})
]
};
如果使用 Webpack 5+，插件默认支持模块热更新（HMR）场景下的增量校验。
配合 lint-staged 提前拦截提交
Stylelint 更适合放在 Git 提交前校验，避免问题进入仓库。搭配 lint-staged + husky：
- 安装：
npm install --save-dev lint-staged husky - 初始化 husky：
npx husky-init，然后编辑.husky/pre-commit - 配置
package.json中的lint-staged字段：
"lint-staged": {
"**/*.{css,scss,sass,less,styl}": "stylelint --fix"
}
这样每次 git commit 前会自动检查并尝试修复样式文件。
