AngularJS 自定义 bootstrap CSS 在组件级别不工作

Question

我决定将登陆页面转换为 AngularJS 网站，因为我需要添加一个管理部分。为了将网站部分与管理部分分开，我创建了两个模块：website 和 admin.

原始网站是用 Bootstrap 3 制作的，并且有一个 style.css 是为所有 Bootstrap 和一般网站定制的 CSS。

在 Angular 版本上，我可以在安装 Bootstrap 3 后正确加载网站，并且在根级别 style.css 我执行以下操作：

@import './app/website/assets/css/style.css';

问题是我不想为整个网站 (website + admin) 加载此 CSS。使用此配置，管理部分也会受到 CSS.

的影响

导入仅在 style.css 中有效。如果我将导入移动到根 component.css 样式中的网站模块，则根本不会加载。

我知道它一定与样式范围和ng-deep有关。

编辑： 我可以在自己的模块中使用 CSS 导入正确加载网站的唯一方法是：

encapsulation: ViewEncapsulation.None

Answer 1

截至目前，无法在模块级别导入 css。全局样式在全局应用，默认的 ViewEncapsulation 使得特定于组件的样式不会渗透到应用程序的其余部分。

If I move the import to the website module in the root component.css styles won't load at all.

在模块根组件中导入 css 只会将样式应用于该组件。我也不会太看重 ng-deep 因为它是/将被弃用 https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

在不知道 WebsiteModule 中有多少组件或 styles.css 是什么样子的情况下，我将提供两个选项。

1) 重命名 styles.css（可能会造成混淆，因为它不再是全局的），将其导入 WebsiteModule 的每个组件中。

如果事实证明这太乏味了（WebsiteModule 中有无数个组件），那么

2) 我会仔细研究有问题的 styles.css，看看应该全局应用哪些样式。

关闭 ViewEncapsulation 应该是 IMO 的最后手段。