如何配置Node Sass与stylelint使CSS类闭合大括号换行？

核心问题 #

你的配置和编译命令存在两个关键问题，导致输出的CSS格式不符合预期：

1. Stylelint路径匹配错误 #

编译命令里的stylelint '*.css' --fix 是针对根目录下的CSS文件，但node-sass编译后的文件输出到了./assets/css/目录，Stylelint根本没找到需要修复的目标文件，自然不会应用格式化规则。

2. Stylelint规则配置不全 #

• 你设置了indentation: "tab"，但node-sass默认输出2空格缩进，由于Stylelint未处理到文件，缩进格式保留了node-sass的默认值；
• 当前block-closing-brace-space-before: "always-single-line"规则会让闭合大括号紧跟在声明行末尾（带空格），但你期望多行声明时闭合大括号单独占一行，缺少对应规则配置。

修正方案 #

1. 调整编译命令 #

将Stylelint的目标路径改为编译后的CSS文件所在目录，同时无需重复执行两次--fix：

"compile:css": "node-sass sass/ -o ./assets/css/ && stylelint ./assets/css/*.css --fix || true"

2. 更新Stylelint规则 #

补充并修改大括号换行相关规则，确保格式符合预期：

{
    "extends": [
        "@wordpress/stylelint-config/scss"
    ],
    "ignoreFiles": [
        "sass/_normalize.scss"
    ],
    "rules": {
        "indentation": "tab",
        // 多行声明时，闭合大括号前强制换行
        "block-closing-brace-newline-before": "always-multi-line",
        // 多行声明时，闭合大括号前不保留空格
        "block-closing-brace-space-before": "never-multi-line",
        "block-no-empty": true,
        "block-opening-brace-newline-after": "always-multi-line",
        "block-opening-brace-space-after": "always-single-line",
        "block-opening-brace-space-before": "always",
        "declaration-block-trailing-semicolon": "always",
        "declaration-colon-space-before": "never",
        "declaration-block-semicolon-space-after": "always-single-line",
        "font-family-no-missing-generic-family-keyword": null,
        "no-descending-specificity": null,
        "no-duplicate-selectors": null,
        "font-family-no-duplicate-names": null,
        "selector-class-pattern": null
    }
}

效果说明 #

修正后，Stylelint会正确识别编译后的CSS文件，将缩进改为tab格式，同时让多行声明的闭合大括号单独占一行，最终输出你期望的格式：

.test__element {
    color: red; 
}

内容的提问来源于stack exchange，提问作者zeropsi