Angular 19自定义Bootstrap主题报错：无法找到导入的样式表

报错原因 #

Angular 19及配套的Angular CLI 19+已采用ES模块解析规则，不再支持通过~符号指向node_modules目录下的依赖文件。你原代码里的@import "~bootstrap/scss/functions";属于旧版Angular的路径引用方式，在新版本中会被判定为无效路径，导致找不到对应的SCSS文件。

解决步骤 #

修改src/bootstrap.scss中的导入语句，去掉所有~前缀，直接用包名引用Bootstrap的SCSS文件：

// Import Bootstrap's functions and variables
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// Override Bootstrap variables
$primary: #ff5733; // Change primary color
$secondary: #33c1ff; // Change secondary color

// Import Bootstrap styles
@import "bootstrap/scss/bootstrap";

如果上述修改后仍有路径问题，可尝试用相对路径直接指向node_modules目录（仅作为备选方案）：

@import "../node_modules/bootstrap/scss/functions";

额外说明 #

你当前angular.json里的styles数组配置["src/styles.scss", "src/bootstrap.scss"]是合理的，自定义主题文件会先覆盖Bootstrap默认变量，后续加载的Bootstrap主样式会自动应用这些自定义配置。

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