为何在SCSS文件添加background-color:red;时出现Unexpected named color错误？

你遇到的这个错误确实是Stylelint的color-named规则触发的，这个规则的作用就是限制代码里使用red、blue这类命名颜色，强制开发者用十六进制、RGB/RGBA这类更精确的颜色格式。下面给你几个可行的解决办法：

方法1：替换命名颜色为非命名格式 #

最简单的方式就是把命名颜色换成对应的十六进制或RGB值，比如：

background-color: #ff0000; // 对应red
// 或者
background-color: rgb(255, 0, 0);

这样直接符合规则要求，报错就会消失。

方法2：调整Stylelint的规则配置 #

如果你就是想用命名颜色，或者项目允许使用特定的命名颜色，可以修改Stylelint的配置文件（通常是项目根目录下的.stylelintrc、.stylelintrc.json或者stylelint.config.js，也可能在package.json的stylelint字段里）：

• 完全关闭这个规则：

{
  "rules": {
    "color-named": null
  }
}

• 允许所有命名颜色：

{
  "rules": {
    "color-named": "always"
  }
}

• 只允许特定的命名颜色（比如只允许transparent）：

{
  "rules": {
    "color-named": ["never", { "ignore": ["transparent"] }]
  }
}

方法3：临时忽略单行的规则检查 #

如果只是这一行需要用命名颜色，不想改全局配置，可以在代码行上方加个Stylelint的忽略注释：

/* stylelint-disable-next-line color-named */
background-color: red;

这样Stylelint就会跳过这一行的color-named规则检查。

内容的提问来源于stack exchange，提问作者merry-go-round