时间戳

首页 > 解决方案 > AngularJS自定义引导CSS在组件级别不起作用

javascript - AngularJS自定义引导CSS在组件级别不起作用

问题描述

我决定将登录页面转换为 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

标签： javascriptangularjstwitter-bootstrap-3angularjs-scope

解决方案

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

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

在模块根组件中导入该 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 的最后手段。

推荐阅读