Angular加载Bootstrap4执行ng serve时出现文件找不到错误的解决咨询

错误根源 #

你碰到的ENOENT: no such file or directory错误，本质是CSS导入路径的解析逻辑出了问题。你在style.css里用了~前缀，这个符号在一些旧的构建工具里用来指向node_modules目录，但Angular CLI的CSS处理机制并不需要它——CLI会自动在node_modules中查找第三方依赖的资源。当你加上~后，构建工具错误地把路径解析成了项目根目录下的bootstrap文件夹（而非node_modules里的Bootstrap包），自然找不到对应的CSS文件。

具体解决方法 #

这里有几种靠谱的解决方式，按推荐度排序：

方法1：修正style.css的导入语句

直接去掉~前缀，改成下面的写法就行：

@import 'bootstrap/dist/css/bootstrap.css';

Angular CLI会自动在node_modules目录定位到Bootstrap的CSS文件，这样就能正常加载了。

方法2：通过angular.json全局配置（更推荐）

Angular官方更推荐通过配置文件全局引入第三方样式，这种方式更便于统一管理，也能彻底避免路径问题：

1. 打开项目根目录下的angular.json文件
2. 找到projects -> [你的项目名称] -> architect -> build -> options -> styles这个数组
3. 把Bootstrap CSS的路径添加到数组中，示例如下：

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

保存文件后重启ng serve，Bootstrap的样式就会全局生效，你也不用再在style.css里写@import语句了。

方法3：使用相对路径导入（备选）

如果上面两种方法都不适用，你也可以用相对路径直接指向node_modules里的文件：

@import '../node_modules/bootstrap/dist/css/bootstrap.css';

注意要根据style.css的实际位置调整路径层级，这种方式灵活性较差，不推荐长期使用。

验证步骤 #

修改完成后，重新执行ng s --o，如果没有报错，且你之前添加的Bootstrap Starter Template布局正常显示，就说明问题已经解决啦。

内容的提问来源于stack exchange，提问作者m.mera