2017-04-18 9 views
0

同じCSSをすべてのPolymerコンポーネントと共有する必要があります。私が検索したものから、スタイルシートにリンクを直接配置することは推奨されていません。コアスタイルです。別のフォルダにあるときにPolymerで動作する共有スタイルを取得できない

私はスタイルモジュールと呼ばれるものを使用しようとしました。 shared-styles.htmlという別のファイルに、私が望むCSSを挿入してから<style is="custom-style" include="shared-styles"></style>にインポートします。

これは、共有スタイルが要素/コンポーネントと同じフォルダにある場合に機能しますが、CSSを繰り返しコピーしてすべてのフォルダに繰り返し貼り付けるのはあまり実用的ではないので、それ自身のフォルダにあります。しかし、そのスタイルは消えてしまいます。

インポートパスが正しいようですが、どちらかの方法で変更しようとしましたが、何も起こりません。

リンクタグから「async」を追加または削除したり、スタイルタグからis = custom-styleを追加または削除したりしていますが、これまでの変更はありませんでした。

ポリマーサーバ--openが唯一のコンポーネントフォルダにあるファイルを取得しますので、私は、多分問題は、私は私のコンポーネントをテストしていますどのようにしていた一つのアイデアが。

Here's a pen, but you can't really see the problem there, since I can't put the CSS in a different folder.

どれガイダンスは深くいただければ幸いです。

コンソールエラー:

127.0.0.1/:1 GET http://127.0.0.1:8081/shared-styles/shared-styles.html 404 (Not Found) 
polymer.html:2654 Could not find style data in module named shared-styles 

答えて

0

右みんな、私の質問が混乱した場合は申し訳ありません。

問題は確かにだけので、別のフォルダにスタイルを無視して、コンポーネントフォルダにあるファイルを取得ポリマーサーバ--openに関連していました。

方法私はコンポーネントフォルダ内の外のフォルダへのショートカットを作成し、その後、ちょうど通常、このようなスタイルを挿入することにより、だったそれを修正:

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

は、それが誰かを役に立てば幸い!

0

あなたshared-stylesためdom-module IDを定義していないようです。

正しいshared-styles/shared-styles.htmlファイルには、次のようになります。

<dom-module id="shared-styles"> 
    <template> 
     <style> 
      /** your CSS goes here **/ 
     </style> 
    </template> 
</dom-module> 
+1

私はcodePenが本当に問題を表示していないと言っていたので、あなたはそこに複数のhtmlやフォルダを見ることができないので、私は定義しました。しかし、同僚は問題は、サーバーは "範囲"外のフォルダを見つけることができないということに同意している。私たちはフォルダのショートカットを使ってテストを行い、もしうまくいくなら私は後で投稿します。 –

関連する問題