javascript - AngularJS 自定义引导 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 的最后手段。