Angular 5生产构建后ngx-bootstrap日期选择器样式失效求助

我之前也碰到过类似的生产构建样式丢失的情况，给你几个实用的排查和解决方向：

• 全局样式引入检查
  Angular 5的生产构建会做样式优化，如果你的ngx-bootstrap日期选择器样式是局部引入的，很可能被构建工具忽略。打开项目根目录的.angular-cli.json（Angular 5用的是这个配置文件，不是后来的angular.json），找到styles数组，确保全局引入了必要的样式文件：

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
  ]
  

  注意路径要和你的项目目录结构匹配，别写错层级。

• CSS预处理器路径验证
  如果项目用了Sass/Less这类预处理器，引入样式时要正确使用~符号指向node_modules目录，避免生产构建时路径解析错误。比如Sass中应该这么写：

  @import "~bootstrap/dist/css/bootstrap.min.css";
  @import "~ngx-bootstrap/datepicker/bs-datepicker.css";
  

• 生产构建优化配置调整
  Angular 5默认的生产构建会开启样式压缩和树摇优化，偶尔会误把ngx-bootstrap的样式标记为无用代码。可以先临时关闭优化选项测试：
  在.angular-cli.json的defaults.build里修改配置：

  "defaults": {
    "build": {
      "optimization": false,
      "extractCss": true
    }
  }
  

  如果关闭优化后样式恢复正常，说明是优化过程的问题。这时候可以考虑升级到Angular 5兼容的最新ngx-bootstrap版本（记得Angular 5对应ngx-bootstrap 2.x系列，别装高版本），或者手动指定保留样式文件。

• 组件样式隔离问题排查
  如果你是在组件的styleUrls里引入日期选择器样式，同时组件用了默认的ViewEncapsulation.Emulated，生产构建后样式可能被组件隔离机制屏蔽。这种情况下，要么改成全局引入样式，要么把组件的封装模式改成ViewEncapsulation.None（注意避免样式污染全局）：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-date-picker',
    templateUrl: './date-picker.component.html',
    styleUrls: ['./date-picker.component.css', '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class DatePickerComponent { }
  

• 清理构建缓存重新构建
  旧的构建缓存也可能导致样式不更新。先删除项目根目录的dist文件夹，然后执行ng build --prod --aot=false（先关闭AOT编译测试），看看样式是否正常。如果AOT关闭后正常，那大概率是AOT编译时的样式解析问题，检查下样式文件有没有语法错误。

试试这些方法，应该能解决你的问题。

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