Bootstrap4自定义变量覆盖报错：需加!default但文档要求移除

这个问题其实不是Bootstrap官方文档的问题，而是你的项目里启用了stylelint的scss/dollar-variable-default规则——这个代码检查规则强制要求所有自定义的SCSS变量必须添加!default标志，但这和Bootstrap官方推荐的变量覆盖流程完全冲突了。

问题根源 #

Bootstrap的变量覆盖逻辑是：

• 先定义不带!default的自定义变量（因为!default的作用是“只有变量未定义时才生效”，不带它的话你的变量会直接覆盖Bootstrap默认的带!default的变量）
• 再导入Bootstrap的SCSS文件，这样你的自定义值会替换默认值

而stylelint的scss/dollar-variable-default规则是一个通用代码规范，它不知道你是在做Bootstrap的变量覆盖，所以会抛出错误。

解决方案 #

调整stylelint的配置，关闭这个规则即可：

1. 找到项目中的stylelint配置文件，通常是.stylelintrc、.stylelintrc.json或者stylelint.config.js
2. 在配置的rules部分添加以下内容：
   若为JSON格式配置：

   "rules": {
     "scss/dollar-variable-default": null
   }
   

   若为JS格式配置：

   module.exports = {
     // 其他配置...
     rules: {
       'scss/dollar-variable-default': null
     }
   }
   

修改完配置后，重新执行npm run dis，报错应该就消失了，你的Bootstrap变量覆盖也能正常生效。

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