如何修复Angular项目引入Bootstrap 3时的CSS属性值报错问题

这个问题非常普遍，几乎所有用高版本Angular CLI引入原生Bootstrap3的开发者都碰到过，既不是引入操作出错，也不是Bootstrap源码本身有功能bug。

你看到的background-color:#000\9是Bootstrap3专门针对IE8、IE9做的专属CSS hack：后缀带\9的CSS属性只会被IE9及以下版本的IE浏览器识别，其他所有现代浏览器读到这条声明都会自动跳过，转而执行后面标准写法的background-color:rgba(0,0,0,0)，这段代码的实际运行逻辑是完全正常的。

报错的根源是Angular CLI内置的CSS语法校验工具默认不识别这种针对淘汰浏览器的老旧hack写法，才会抛出属性值不正确的提示，这个提示只会出现在开发阶段的校验环节，不会影响页面在现代浏览器里的实际渲染效果。

处理方案 #

你可以根据自己的项目兼容需求选对应的处理方式：

• 如果项目不需要兼容IE8/IE9这类早已停止支持的古董浏览器：直接删掉带\9的那一条hack声明即可，只保留background-color:rgba(0,0,0,0);，功能不会受任何影响。
• 如果需要保留老IE兼容逻辑、不想修改Bootstrap源码：可以调整项目的CSS校验规则，要么把第三方依赖的bootstrap.min.css加入校验忽略列表，要么在stylelint配置里放行带\9的非标准CSS值，参考配置如下：

{
  "rules": {
    "value-no-unknown": [true, {
      "ignoreValues": ["/\\9/"]
    }]
  }
}

不存在所谓的「属性正确取值」，Bootstrap官方发布的源码本身就是这么写的，报错只是校验规则没有兼容历史hack写法导致的误报。

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