Angular 6中如何正确导入Bootstrap？原Angular5配置报文件不存在错误

你遇到的错误核心原因是：Angular 6+的angular.json配置文件里，styles和scripts的路径规则发生了变化——所有路径都是相对于项目根目录的，而你之前沿用Angular 5的../前缀，会让系统去项目根目录的上级寻找node_modules，自然找不到目标文件。

下面是两种可靠的配置方案，任选其一即可：

方法1：直接修改angular.json配置 #

首先确保你已经安装了所有必需的依赖：

npm install bootstrap jquery popper.js --save

打开项目根目录下的angular.json，找到对应项目的architect > build > options节点，修改styles和scripts配置如下：

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

修改完成后，重启Angular开发服务器（ng serve），让新配置生效。

方法2：通过SCSS导入（支持个性化定制） #

如果你的项目使用SCSS作为样式预处理器（默认主样式文件是styles.scss），可以直接在主样式文件中导入Bootstrap的SCSS源码，这样能方便地自定义Bootstrap的默认变量（比如主题色、字体等）：

1. 同样先确保依赖安装完成，然后编辑src/styles.scss：

// 可选：自定义Bootstrap变量，覆盖默认值
$primary: #20c997;
$secondary: #6c757d;

// 导入Bootstrap核心SCSS文件
@import '~bootstrap/scss/bootstrap';

2. 此时angular.json里的styles只需要保留你的主样式文件即可，scripts部分和方法1一致：

"styles": [
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

这种方式的优势是能快速定制Bootstrap的外观，无需修改源码文件。

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