3

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

一切都很好，直到上周 Google Chrome 35m 出现。所有Component的样式表都损坏了。看起来applyAuthorStyles在 Google Chrome 35m 中不起作用。

我花了很多时间研究，最后想出了以下解决方案：
在useShadowDom: false声明一个Component. 它让我重构Component了我项目中的每一个存在：

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

正如你所看到的，如果我应用这个解决方案，还有很多额外的工作。

我想知道是否有比我更好的解决方案？

编辑

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

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

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

4

2 回答 2

1

我不这么认为。

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

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

注意：applyAuthorStyles已经弃用了几个月。

一段时间以来，Angular.dart 支持通过将参数添加useShadowDom: false到@Component.

于 2014-05-27T07:53:18.550 回答
1

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

我的索引文件是我的主要组件的薄包装。然后我创建了一个文件夹，如：lib/component/css/sass. 在sass我创建了所有 css 文件的 scss 部分（只需将其重命名为myCss.cssto _myCss.scss）并创建了一个lg-global.scss导入所有这些部分的主 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 文件是否会导致性能不佳。

于 2014-11-24T01:15:44.917 回答