Question

回到另一个聚合物问题，我有一个聚合物/电子应用程序，我正在尝试设计。

我想创建一个theme.css，其中包含一个:host块，其中包含我的整个主题，然后我可以将其导入到我的模块样式表中，但我尝试了一些不同的东西并试图找到任何东西在文档中无济于事。

到目前为止，我已尝试过在<template>定义之外的和：

带有<link rel="stylesheet" href="./account-list.css">的

@import <style>@import 'my-theme.css';</style>就在<link>之上 :root

中:host代替theme.css

但似乎都不起作用，theme.css肯定是被要求的，但对模块的风格没有影响。

无论如何，聚合物都有这样的主题，我真的不希望有一个构建步骤。

Answer 1

在Polymer 1.1中引入了一个名为样式模块（实际上是场景背后的dom-module元素）的新概念（阅读它here）以及包含外部的旧方法样板已被弃用（请阅读here）。

基本上，您需要创建一个 html 文件，就像您通常创建一个元素来存储样式一样。 id定义了稍后将引用的此文件的名称。

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style> 
  </template>
</dom-module>

然后显然你需要在你的页面中导入这个文件。

<link rel="import" href="shared-styles.html">

现在，有两种情况。

如果您在文档级别使用custom-style，则需要包括您之前定义的样式模块 -

<style is="custom-style" include="shared-styles"></style>
如果您只想在其中一个中包含样式模块 元素，做到这一点 -

<dom-module id="my-element"> <style include="shared-styles"></style>

查看演示这两种情况的plunker。

请记住，在您的特定示例中，由于您使用的是:host，因此我假设您将使用方案2.因此，此plunker应该更加清晰。

Answer 2

使用dom-module概念，并且为了使用外部第三方，我做了下一个并且它正在工作，但可能不是Polymer的最佳实践。

带有第三方css的Dom模块（ third-party-styles.html ）

<dom-module id="third-party-styles">
    <link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>

我创建了一个容器（ elements.html ），其中导入了所有需要的html模块，并且我在那里注册了第三方样式模块和我的模块

<link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">

我在 index.html

的头部添加了elements.html

<head>
    ...
    <link rel="import" href="elements.html">
<head>
<body>
    <my-module></my-module>
</body>

在我的聚合物元素（ my-module.html ）

中

<link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
    <style include="third-party-styles"></style>
    <template>
        <p class=".thirdPartyClass">Content with third party css rule</p>
    </template>
</dom-module>

任何反馈？

聚合物@import主题文件：样式中的主机没有任何影响

2 个答案: