怎么通过Stylelint规范团队的SCSS和CSS代码风格？-css教程-PHP中文网

Stylelint 默认只识别标准 CSS 语法，遇 SCSS 特有语法（如 $variable、@mixin）会报 unknown word；必须安装 stylelint-scss、配置 plugins 和 customSyntax: "postcss-scss"，并确保 .stylelintrc.js 在项目根目录。

怎么通过stylelint规范团队的scss和css代码风格？

Stylelint 能直接约束 SCSS 和 CSS 的写法，但必须配对插件、配置和工作流，缺一不可。只装包不配 stylelint-scss，.scss 文件会报 unknown word；只写规则不进 Git Hook，规则就只是摆设。

为什么 .scss 文件一跑就报 unknown word？

这是最常踩的坑：Stylelint 默认只认标准 CSS 语法，遇到 @mixin、$variable、@extend 这类 SCSS 特有语法时直接懵掉。

必须安装 stylelint-scss 插件：npm install --save-dev stylelint-scss

配置中要同时声明 plugins 和 extends，不能只写一个：

module.exports = {
  plugins: ['stylelint-scss'],
  extends: ['stylelint-config-standard', 'stylelint-config-scss'],
  rules: {
    'scss/dollar-variable-pattern': '^var_',
    'scss/at-rule-no-unknown': true
  }
};

如果用 stylelint-config-standard-scss，它内部已包含 stylelint-scss 插件，但你仍需显式安装该包，否则 extends 会加载失败

怎么让规则在 VS Code 里实时生效？

VS Code 不会自动识别项目级 Stylelint 配置，必须手动指定校验语言和可执行路径。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

装好 SublimeLinter-stylelint（Sublime）或 Stylelint 官方插件（VS Code）后，进设置搜 stylelint.validate
确保 stylelint.validate 包含 'css'、'scss'、'vue'（若项目含 <style lang="scss"></style>）
如果本地是项目内安装（--save-dev），插件默认找不到 stylelint 命令——得在插件设置里填 node_modules/.bin/stylelint 的绝对路径

怎么防止有人绕过检查直接提交？

靠人自觉没用，得用 husky + lint-staged 在 git commit 前卡住。

先装依赖：npm install husky lint-staged --save-dev

在 package.json 中加脚本和钩子：

"scripts": {
  "lint:css": "stylelint \"src/**/*.{css,scss,vue}\" --fix"
},
"lint-staged": {
  "*.{css,scss,vue}": "npm run lint:css"
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}