Polymer 1.1 and SASS

Question

For some reason there is no information available on how to use sass and polymer together. First I tried the following:

<dom-module id="app-header">
    <link rel="import" type="css" href="../css/app-header.css">

    <template> 
        ...

Here the stylesheet is external and I can easily transform my scss into css.

Although this works, the styles are applied to the whole document.

Anyway, in Polymer's 1.1 release this is deprecated and although there is a way to share styles you still have your css inside a template tag

<!-- shared-styles.html -->
<dom-module id="shared-styles">
    <template>
        <style>
            .warning {
                color: red;
                font-weight: bold;
            }
        </style>
    </template>
</dom-module>

What would be the best way to use scss with polymer 1.1 ?

Check this answer: http://stackoverflow.com/questions/29354396/polymer-and-sass/33875597#33875597 I think could be useful for you also. — David Vega, Nov 23 '15 at 16:18
You can to use "gulp-inject-string". See more: https://gist.github.com/horacioibrahim/70ea32c9ba06a7d2d2632995c47149b4 — horacioibrahim, Jan 09 '17 at 19:22

stone · Answer 1 · 2016-09-14T15:08:55.627

3

In Polymer 1.1 external stylesheets have been deprecated in favour of "style-modules".

My solution was to create a bash script which takes the output of the scss transpiler and wraps it in a custom style module definition.

I attached this script to a PHPStorm file watcher and all i have to do is modify my SCSS and everything is auto generated.

edited Sep 14 '16 at 15:08

answered May 22 '16 at 00:31

stone

2,192
16
26

Polymer 1.1 and SASS

1 Answers1