如何在 Angular 2、Dart 和 Polymer 中使用 CSS 混合答案

【问题标题】：How to use CSS mixins with Angular 2, Dart and Polymer如何在 Angular 2、Dart 和 Polymer 中使用 CSS 混合
【发布时间】：2016-05-27 18:22:54
【问题描述】：

我在我的 angular2-dart 项目中使用了聚合物和聚合物元素。

我可以添加聚合物元素（例如纸卡），但我无法使用 css-mixins，我不知道我是否缺少导入或其他什么。

我的 .dart

import 'package:angular2/core.dart';
//Polymer imports
import 'package:polymer_elements/paper_card.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_icon_button.dart';
import 'package:polymer_elements/iron_icon.dart';
import 'package:polymer_elements/paper_styles/classes/typography.dart';
import 'package:polymer_elements/iron_flex_layout/classes/iron_flex_layout.dart';

@Component(
    templateUrl: '../view/book_splash_component.html',
    selector: 'book-splash',
    styleUrls: const ['../view/css/book_splash_component.css'],
    encapsulation: ViewEncapsulation.Native
)
class BookSplashComponent{
    //nothing that matters
}

我的 .html

<paper-card class="rate">
    <div class="rate-content">
        <div class="card-content">
            <div class="rate-header">Rate this album</div>
            <div class="rate-name">Mac Miller</div>
            <div>Live from space</div>
        </div>
        <div class="card-actions">
            <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
        </div>
    </div>
    <div class="rate-image"></div>
</paper-card>

我的带有 mixins 的 .css（不起作用）

paper-card.rate { @apply(--layout-horizontal); }
  .rate-image {
    width: 100px;
    height: 170px;
    background: url('./donuts.png');
    background-size: cover;
  }
  .rate-content {
    @apply(--layout-flex);
    float: left;
  }
  .rate-header { @apply(--paper-font-headline); }
  .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
  paper-icon-button.rate-icon {
    --iron-icon-fill-color: white;
    --iron-icon-stroke-color: var(--paper-grey-600);
  }

但是如果我用相应的样式替换 mixins 就可以了！可能我错过了一些愚蠢的东西。

我在这里尝试“纸卡可以有水平图像”示例： https://elements.polymer-project.org/elements/paper-card?active=paper-card&view=demo:demo/index.html

【问题讨论】：

上面的CSS是否在book_splash_component.css'中？
@GünterZöchbauer 是的，对吗？我还尝试将css嵌入到内的 .html 文件中，但不行。

标签： angular dart polymer dart-polymer

【解决方案1】：

您是否尝试过使用 shadow dom，例如在您的角度组件或聚合物上禁用它以查看会发生什么？

【讨论】：

我尝试将 ViewEncapsulation 更改为 Emulated 或 None，但仍然无法识别 mixins。也许正如 Günter 所说，它们只在内部工作

【解决方案2】：

这是特定于 Polymer 的，仅适用于 Polymer 元素的样式标签或 head 元素中的 <style is="custom-style">。

【讨论】：

我尝试将链接 rel 导入到我的 main.html 中，并且源代码在页面源中正确，但仍然无法识别 mixins。