Angular项目转SCSS后，npm安装依赖仍下载CSS而非SCSS的问题排查

首先要明确：Bootstrap的npm包本身就包含完整的SCSS源码，不是只有预编译的CSS文件。你看到node_modules里的CSS只是预编译产物，SCSS文件其实已经在包里了，只是你没找对位置。

接下来是你需要补充的步骤：

• 找到Bootstrap的SCSS源码
  安装完成后，node_modules/bootstrap/scss/目录下就是所有SCSS源码，入口文件是bootstrap.scss，里面包含了所有组件的SCSS文件引用。

• 修改全局样式引入方式
  打开angular.json，找到build -> options -> styles数组，把原来引入的Bootstrap CSS文件替换成SCSS入口文件：

  "styles": [
    "src/styles.scss",
    "node_modules/bootstrap/scss/bootstrap.scss"
  ]
  

  这样Angular在构建项目时会自动编译这些SCSS文件，生成最终的CSS。

• 完善SCSS预处理器配置
  为了在组件的SCSS文件中更方便地引入Bootstrap的变量、混合宏等，建议在angular.json的stylePreprocessorOptions里配置SCSS的包含路径：

  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "node_modules/bootstrap/scss"
        ]
      }
    }
  }
  

  之后在组件SCSS里就可以直接写@import "variables";来引用Bootstrap的变量文件，不用写全路径。

• 确认全局样式文件后缀
  确保项目根目录的全局样式文件已经从styles.css改成styles.scss，并且angular.json里的styles数组中对应的路径也更新为.scss后缀。

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