vue中使用stylus作为css编译器,先安装依赖:
yarn add stylelint stylelint-plugin-stylus -D
根据stylelint-plugin-stylus的文档进行配置,项目根目录建立stylelint.config.js,内容如下:
module.exports = {
extends: [
// add more generic rulesets here, such as:
// "stylelint-config-standard",
'stylelint-plugin-stylus/standard',
],
rules: {
// override/add rules settings here, such as:
// "stylus/declaration-colon": "never"
},
}
然后配置vscode编辑器,先安装扩展:stylelint
然后在vscode setting.json中添加配置:
"stylelint.snippet": ["css", "less", "postcss", "scss", "stylus"],
"stylelint.validate": [
"css",
"html",
"javascript",
"javascriptreact",
"less",
"markdown",
"postcss",
"sass",
"scss",
"source.css.styled",
"source.markdown.math",
"styled-css",
"sugarss",
"svelte",
"typescript",
"typescriptreact",
"vue",
"vue-html",
"vue-postcss",
"xml",
"xsl",
"stylus" // 重要
],
"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax" // 重要, 否则会提示 Unknown word CssSyntaxError 未知词 css句法错误
最后要做的是,开启文件保存自动修复,还是vscode setting.json中加入
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true // 这个很重要
},
完成。
参考:
https://juejin.cn/post/6854573221916868616 【解决了Unknown word CssSyntaxError】
https://www.cnblogs.com/jiaoshou/p/12220999.html 【解决了保存文件自动修复】
http://cssor.com/vscodevue3stylelintstylus%e9%85%8d%e7%bd%ae.html