I started using Bootjack, but I cant use the classes in my Polymer elements if I have imported the CSS file in my index.html. It does work if I import the CSS in each component (which prints an warning that I use the CSS file multiple times). Is there a way I could use the CSS file from my index.html?
Asked
Active
Viewed 85 times
1
Günter Zöchbauer
- 623,577
- 216
- 2,003
- 1,567
Azael
- 614
- 4
- 16
1 Answers
0
You can configure the Polymer transformer to not inline the CSS files then the warnings go away.
Example from another question:
transformers:
- polymer:
inline_stylesheets:
lib/bootstrap/css/bootstrap.min.css: false
lib/css/op.css: false
lib/font-awesome-4.2.0/css/font-awesome.min.css: false
As far as I know bootjack doesn't provide shadow DOM support therefore there is no other way than referencing the file in every element (might still not work in some cases).
Günter Zöchbauer
- 623,577
- 216
- 2,003
- 1,567
-
It there actually any way to inherit styles from a parent polymerElement? – Azael Nov 11 '14 at 11:00
-
As far as I understand this was the case in Polymer.js but never in Polymer.dart and seems to be discontinued in Polymer.js since a while too. – Günter Zöchbauer Nov 11 '14 at 11:11
-
Hey, Gunter, this approach confuses me a little. If the stylesheets aren't inlined, how are they accessed by individual components? Also, what do you think of including the CSS in a
element and sharing it that way? – montyr75 Nov 11 '14 at 21:36 -
1You can have a style tag in for example `index.html` that contains the CSS or alternatively links to a `*.css` file. It makes no difference in how the styles are applied. When the same CSS is inlined more than once it bloats the files unnecessarily. If you just link it instead of inlining the browser ensures the file gets loaded only once and is used from the cache where a file with the same URL is referenced. This is the reason Polymer produces a warning about the inlining when its used more than once. – Günter Zöchbauer Nov 11 '14 at 21:45