Angular 18迁移后AdminLTE SCSS失效：登录框无法居中

快速修复（先恢复布局） #

直接在登录组件的样式文件（比如login.component.scss）中添加以下代码，强制覆盖样式：

.login-box {
  margin: 7% auto !important;
}

加!important是为了确保能覆盖AdminLTE可能存在的默认样式优先级问题。

排查根源（解决根本问题） #

1. 检查AdminLTE的引入路径
   打开root.scss，确认AdminLTE的导入语句是否适配Angular 18的模块规则。Angular 18不再需要用~符号引入node_modules中的资源，原来的@import '~admin-lte/dist/css/adminlte.css';可以改成：

   @import 'admin-lte/dist/css/adminlte.css';
   

   如果是通过SCSS源文件导入，同理调整路径。

2. 确认Angular样式打包配置
   打开angular.json，找到build -> options -> styles数组，确保AdminLTE的CSS文件被正确列入：

   "styles": [
     "src/root.scss",
     "node_modules/admin-lte/dist/css/adminlte.css"
   ]
   

   这样能保证打包工具正确加载AdminLTE的样式资源。

3. 核对AdminLTE版本兼容性
   Angular 18的打包机制和旧版本差异较大，可能你当前使用的AdminLTE版本不兼容。可以尝试升级AdminLTE到最新稳定版：

   npm install admin-lte@latest --save
   

   升级后重新检查login-box类的默认样式是否包含margin:7% auto，如果新版本确实移除了这个样式，就把补写的样式移到全局的root.scss中，避免每个组件重复写。

4. 查找AdminLTE源码中的样式定义
   直接去node_modules/admin-lte目录下查找相关SCSS文件，比如src/scss/pages/login.scss，查看login-box的原始样式。如果找不到这个类的定义，说明版本更新后结构有变化，可能需要改用AdminLTE新版本的登录页布局类，或者自己在全局样式中维护这个自定义样式。

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