无法为bs-datepicker添加自定义CSS，ng-build后修改不生效

我明白你遇到的问题了——直接修改node_modules里的bs-datepicker CSS虽然本地ng serve能生效，但执行ng build后修改就消失了。这是因为构建过程会重新拉取/使用干净的依赖包，你本地修改的依赖文件会被完全覆盖掉，根本不会被打包到最终产物里。

下面给你几个靠谱的解决方案，帮你永久生效自定义的日期选择器样式：

方案一：用全局样式文件覆盖（推荐） #

把你的自定义CSS放到项目的全局样式文件中（比如src/styles.scss或src/styles.css），全局样式不受Angular组件样式封装的限制，能直接作用到bs-datepicker：

.bs-datepicker {
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  background: #fff;
  box-shadow: 0 0 0px 0 #aaa;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-top: 50px;
}

方案二：在组件样式中用::ng-deep穿透封装 #

如果你想把样式限定在当前组件内，可以使用::ng-deep打破Angular的样式封装，让样式渗透到子组件（bs-datepicker）：

::ng-deep .bs-datepicker {
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  background: #fff;
  box-shadow: 0 0 0px 0 #aaa;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-top: 50px;
}

小提示：如果担心样式全局污染，可以结合:host限定作用域，确保样式只影响当前组件内的日期选择器：

:host ::ng-deep .bs-datepicker {
  /* 你的自定义样式 */
}

方案三：检查bsConfig配置项（可选） #

bs-datepicker提供了部分样式配置（比如主题、日期格式等），你可以查看官方文档确认是否有你需要的定位/边距相关配置。如果有的话，优先用配置方式会更稳妥，比如在组件中修改bsConfig：

// 组件.ts文件中
datePickerConfig = {
  // 这里可以添加官方支持的配置项
};

完成样式修改后，执行ng build再部署，就能看到自定义样式生效了。

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