AngularDart - 如何在 Google Chrome 35m 中使用全局 CSS 设置组件样式（不推荐使用 applyAuthorStyles）

Question

我正在使用 Angular Dart 开发一个大型项目。 Javascript 将使用 dart2js 从 Dart 生成。该项目目前针对的是 Google Chrome，但将来它也应该可以在 Firefox 中运行。

在上周推出 Google Chrome 35m 之前，一切都很好。所有Component 都损坏了样式表。 applyAuthorStyles 似乎在 Google Chrome 35m 中不起作用。

我花了很多时间研究，终于想出了以下解决方案：
声明Component 时使用useShadowDom: false。它让我重构了我项目中所有存在的Components：

• 删除cssUrl。我必须将每个Component 的样式表移动到一个（或多个）样式表文件中并将它们导入index.html
• 重新实现每个 ShadowRootAware.onShadowRoot，因为该方法不接受 ShadowRoot 作为其参数
• 重新测试（当然）

如您所见，如果我应用此解决方案，还有很多额外的工作。

不知道有没有比我更好的解决方案？

编辑

我想我应该解释一下我的代码结构，以帮助大家更好地理解我的问题。

• 我的项目中有很多Component。每个Component 有 3 个文件：1 个 CSS 文件（范围）、1 个 HTML 文件和 1 个 dart 文件
• 我有一些全局 CSS 文件并在入口 HTML 页面 (index.html) 中导入它们
• 在 Chrome 35m 中，Component 中的 HTML 没有来自全局 CSS 的样式，即使我设置了 applyAuthorStyles: true（applyAuthorStyles 已弃用）

我只需要一个解决方案来使用全局 CSS（例如来自 CSS 框架）设置 Component 的样式，并且代码更改最少。

Answer 1

我不这么认为。

如果你不使用 shadow DOM，你就不能使用 scoped CSS。

另一种选择是保留 shadow DOM 并更改您应用于页面的 CSS 以使其与 shadowDOM 一起使用（例如添加 /deep/ 组合器）。

注意：applyAuthorStyles 已被弃用数月。

Angular.dart 支持通过将参数 useShadowDom: false 添加到 @Component 来创建没有影子 DOM 的组件。

Answer 2

我不会说使用全局 css 文件设置 Angular.dart 项目中所有内容的好方法，但我找到了适合我的解决方法。

我的索引文件是我的主要组件的薄包装。然后我创建了一个文件夹，如：lib/component/css/sass。在sass 中，我创建了所有css 文件的scss 部分（只需将其从myCss.css 重命名为_myCss.scss）并创建了一个主scss 文件lg-global.scss 来导入所有这些部分：

@import "pure-side-menu";
@import "pure-min";
@import "grids-responsive-min";

{... my css rules}

我已设置 compass 将我的 scss 文件编译为 css 文件夹中的单个 css 文件，现在我可以像这样在我的组件中导入该单个文件：

@Component(
    selector: 'main-menu',
    templateUrl: 'main_menu.html',
    cssUrl: 'css/lg-global.css')

如果我真的想为组件创建一个专门的 css 文件，那也很容易。只需创建一个新的 scss 文件，然后导入您想要的任何 scss 部分。

这是很多额外的工作，但 scss 无论如何要好得多。我唯一真正担心的是在每个组件中使用大量 css 文件是否会导致性能下降。