Vue3.5 + Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类型
一、完整依赖安装
npm install --save-dev stylelint stylelint-config-standard postcss-html # 解析 Vue/HTML 文件中的样式postcss-scss # 解析 SCSS 语法postcss-less # 解析 LESS 语法stylelint-config-recommended-vue # Vue 文件支持stylelint-less # LESS 专属规则stylelint-scss # SCSS 专属规则stylelint-no-unresolved-module # 路径解析
二、完整配置文件 .stylelintrc.json
{"extends": ["stylelint-config-standard","stylelint-config-recommended-vue","stylelint-less","stylelint-scss"],"plugins": ["stylelint-no-unresolved-module"],"overrides": [{"files": ["**/*.vue", "**/*.html"],"customSyntax": "postcss-html"},{"files": ["**/*.scss"],"customSyntax": "postcss-scss"},{"files": ["**/*.less"],"customSyntax": "postcss-less"}],"rules": {// 通用规则"selector-pseudo-class-no-unknown": [true,{ "ignorePseudoClasses": ["deep", "global", "slotted"] }],"selector-pseudo-element-no-unknown": [true,{ "ignorePseudoElements": ["v-deep", "v-global", "v-slotted"] }],"at-rule-no-unknown": [true,{ "ignoreAtRules": ["tailwind", "apply", "layer", "config", "mixin", "include"] }],// LESS 专属规则"less/no-undef-variables": true,"less/color-no-invalid-hex": true,// SCSS 专属规则"scss/at-rule-no-unknown": [true,{ "ignoreAtRules": ["tailwind", "apply", "layer", "config", "mixin", "include"] }],// 路径解析规则"plugin/no-unresolved-module": {"alias": {"@": "./src"}}}
}
三、配套文件配置
- package.json 脚本
"scripts": {"stylelint": "stylelint src/**/*.{html,vue,css,scss,less}","stylelint:fix": "stylelint --fix src/**/*.{html,vue,css,scss,less}"
}
- 忽略文件 .stylelintignore
# .stylelintignore
# 旧的不需打包的样式库
*.min.css# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json# 测试和打包目录
/test/
/dist/
/node_modules/
/lib/
- Vite 集成配置 (vite.config.js)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import stylelintPlugin from 'vite-plugin-stylelint'export default defineConfig({plugins: [vue(),stylelintPlugin({fix: true,include: ['src/**/*.{vue,css,scss,less,html}'],exclude: ['node_modules']})]
})
四、
1、SCSS @use 语法报错
{"rules": {"scss/at-rule-no-unknown": [true,{ "ignoreAtRules": ["use", "forward"] }]}
}
2、Vue3 :deep() 伪类警告
{"rules": {"selector-pseudo-class-no-unknown": [true,{ "ignorePseudoClasses": ["deep", "slotted", "global"] }]}
}
3、解析 .vue 文件中的
{"overrides": [{"files": ["**/*.vue"],"customSyntax": "postcss-html" // 关键配置}]
}
4、变量未识别（以 LESS 为例）
{"rules": {"less/no-undef-variables": true // 检查未定义变量}
}
5、@import 路径报错
{"plugins": ["stylelint-no-unresolved-module"],"rules": {"plugin/no-unresolved-module": {"alias": {"@": "./src" // 配置路径别名}}}
}
