問題描述
回到另一個(gè) Polymer 問題，我有一個(gè) Polymer/Electron 應(yīng)用程序，我正在嘗試設(shè)置樣式.
Back with another Polymer question, I have a Polymer/Electron app that I'm trying to style.
我想創(chuàng)建一個(gè) theme.css 包含一個(gè) :host 塊，其中包含我的整個(gè)主題，然后我可以將其導(dǎo)入到我的模塊樣式表中，但我已經(jīng)嘗試了一些不同的方法并嘗試在文檔中查找任何內(nèi)容均無濟(jì)于事.
I want to create a theme.css that contains a :host block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.
到目前為止，我已經(jīng)在<template>定義之外嘗試了和:
So far, I have tried in, and outside of the <template> definition:
<link rel="stylesheet" href="./account-list.css"> 與 @import<style>@import 'my-theme.css';</style> 就在我的 <link>
上方:root 而不是 :host 在我的 theme.css
<link rel="stylesheet" href="./account-list.css"> with an @import
<style>@import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css
但似乎都不起作用，theme.css 肯定是被請求的，但對模塊的樣式?jīng)]有影響.
But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.
Polymer 有沒有這樣的主題，我真的不想有構(gòu)建步驟.
Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.
推薦答案
引入了一個(gè)叫做style module的新概念(實(shí)際上是一個(gè)dom-module元素在幕后)在 Polymer 1.1 中(閱讀 這里)和包含外部樣式表的舊方法已被棄用(閱讀它 這里).
There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).
基本上，您需要?jiǎng)?chuàng)建一個(gè) html 文件，就像您通常創(chuàng)建一個(gè)元素來存儲(chǔ)您的樣式一樣.id 定義了該文件的名稱，稍后將被引用.
Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.
<!-- shared-styles.html -->
<dom-module id="shared-styles">
<template>
<style>
.red { color: red; }
</style>
</template>
</dom-module>
那么顯然你需要在你的頁面中導(dǎo)入這個(gè)文件.
Then obviously you need to import this file in your page.
<link rel="import" href="shared-styles.html">
現(xiàn)在，有兩種情況.
如果您在文檔級別使用
custom-style，則需要包括你之前這樣定義的 style 模塊 -
If you are using
custom-styleat the document level, you need to include the style module you previously defined like this -
<style is="custom-style" include="shared-styles"></style>
如果您只是想將 style 模塊 包含在您的一個(gè)元素，這樣做 -
If you simply want to include the style module inside one of your elements, do this -
<dom-module id="my-element"><style include="shared-styles"></style>
看看這個(gè)plunker，它演示了這兩種情況.
Have a look at this plunker that demonstrates both scenarios.
請記住，在您的特定示例中，由于您使用的是 :host，我假設(shè)您將使用場景 2.所以這個(gè) plunker 應(yīng)該更清楚一點(diǎn).
Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.
這篇關(guān)于樣式中帶有 :host 的 Polymer @import 主題文件沒有影響的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！