聚合物@import主題文件與：樣式中的主機沒有任何影響

回到另一個聚合物的問題，我有一個聚合物/電子應用程序，我試圖風格。聚合物@import主題文件與：樣式中的主機沒有任何影響

我想創建一個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肯定是被要求，但沒有影響莫dule的風格。

反正有聚合物這樣的主題，我真的不想有一個構建步驟。

來源

2015-08-30 Dave Mackintosh

有高分子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應該更清晰一些。

來源

2015-08-31 01:31:03

是否允許我使用'@ apply'，因爲我只想允許某些樣式被更改，所以我可以在任何不可更改的樣式上使用'@ apply'。 –

是的，你可以。 http://plnkr.co/edit/cwhOYE9XgkfnvixIX6MI?p=preview –

使用dom模塊的概念，併爲了使用外部第三方我做了下一個，它工作，但可能不是聚合物的最佳做法。

大教堂模塊與第三方的CSS（第三方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>

在我的聚合物元件（我-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>

任何反饋？

來源

2016-07-16 13:31:33

聚合物@import主題文件與：樣式中的主機沒有任何影響

回答

相關問題