移除问题库后Angular5应用CSS导入编译失败求助

我之前也碰到过类似的情况，你这个BrowserslistError: Unknown browser major错误，大概率是依赖版本冲突或者browserslist配置异常导致的——毕竟刚移除了第三方库，依赖树的变化很容易触发这类隐性问题。给你几个不用重构现有代码就能解决的方案：

1. 检查并修复browserslist配置 #

先排查项目的浏览器兼容配置：

• 看看项目根目录有没有单独的browserslist文件，或者打开package.json查看是否有browserslist字段
• 如果里面出现了拼写错误、过时关键词（比如major这种无效值），就会触发这个错误，把配置改成标准规则：

  // package.json里的配置示例
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "IE 11"
  ]
  

  要是用单独的browserslist文件，内容改成：

  last 2 versions
  > 1%
  IE 11
  

2. 清理依赖并重新安装 #

移除第三方库后可能残留了版本冲突的依赖，直接清理重装能解决大部分这类问题：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

如果用Yarn，就执行rm -rf node_modules yarn.lock && yarn install。

3. 调整Bootstrap的导入方式 #

你现在在.sass文件里用@import url()导入Bootstrap CSS，其实Angular支持直接在配置里引入全局样式，能绕过sass-loader对CSS文件的额外处理，避免编译异常：

• 打开angular.json，找到architect -> build -> options -> styles数组
• 添加Bootstrap CSS的路径：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.sass"
  ]
  

• 最后删除styles.sass里的@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")语句

4. 锁定兼容的依赖版本 #

如果是autoprefixer和browserslist的版本不兼容导致的问题，可以在package.json里指定稳定兼容的版本：

"devDependencies": {
  "autoprefixer": "^9.8.6",
  "browserslist": "^4.16.6",
  // 其他开发依赖...
}

执行npm install让配置生效即可。

这些步骤应该能帮你快速解决这个编译错误，不用改动现有代码结构。

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