Angular 14+SCSS环境中Bootstrap 5配置后样式不生效问题

核心问题1：Bootstrap 5 已废弃旧版间距类名 #

Bootstrap 5 为支持 RTL（从右到左）布局，彻底移除了 ml-3、mr-3、pl-3、pr-3 这类旧类名，替代规则如下：

• ml-3 → ms-3（margin start）
• mr-3 → me-3（margin end）
• pl-3 → ps-3（padding start）
• pr-3 → pe-3（padding end）
  直接替换类名后测试是否生效。

核心问题2：angular.json 中 Bootstrap SCSS 路径配置错误 #

检查 angular.json 的 build.options.styles 数组，确认引入的路径是否准确：
正确配置示例：

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

注意：

• 确保路径无拼写错误（比如遗漏 scss 目录）
• 验证 bootstrap.scss 确实存在于 node_modules/bootstrap/scss/ 目录下

备选排查方案 #

若上述两点均无问题，尝试以下操作：

• 在项目根目录的 styles.scss 中手动导入 Bootstrap：

  @import "bootstrap/scss/bootstrap";
  

  （Angular 14 已支持省略 ~ 前缀，直接引用 node_modules 中的依赖）
• 清理缓存后重启服务：
  执行命令：

  ng cache clean
  ng serve --open
  

• 临时注释全局自定义样式（比如 * { margin: 0; padding: 0; } 这类重置规则），测试是否存在样式覆盖情况。

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