CODEWITHSUNDEEP
csspolymerpolymer-1.0
Andrea Santana
Andrea Santana

Reputation: 105

Can't get shared-styles to work in Polymer when in different folder

I need to share the same CSS with all of my Polymer components. From what I've searched, placing the link with the stylesheet directly is deprecated, so is core-style.

So I tried to use what I believe is called style module. In a separate file, named shared-styles.html, I've inserted the CSS I wanted and then I import it through <style is="custom-style" include="shared-styles"></style>.

This works when shared-styles is in the same folder as my element/component, but it wouldn't be very practical to copy and paste the CSS again and again in all the folders, so I wanted to keep the styles in its own folder. However, the styles disappear when I do that.

The importing path seems correct to me, but either way I tried to change it and nothing happens.

I've tried many other things such as adding or removing "async" from the link tag, adding or removing is=custom-style from the style tag, but no change so far.

One idea I had is, maybe the problem is how I'm testing my components, since polymer server --open only gets the files that are in the component folder.

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

Any guidance would be deeply appreciated.

Console errors:

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

Upvotes: 0

Views: 1280

Answers (2)

Andrea Santana
Andrea Santana

Reputation: 105

Right guys, sorry if my question was confusing.

The issue was indeed related to polymer server --open only getting the files that are in the component folder, therefore ignoring the styles in a different folder.

The way I fixed it was by creating a shortcut to the outside folder inside the component folder, and then just normally inserting the style like this:

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

Hope it helps someone!

Upvotes: 0

LasaleFamine
LasaleFamine

Reputation: 633

Seems you are not defining the dom-module id for your shared-styles.

The correct shared-styles/shared-styles.html file should be:

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

Upvotes: 0

Related Questions