CSS can't be inlined to style tag in html file using gulp-inline-css

Question

So, I'm already pulling my hair out on this one. I'm using Polymer to build components. But I still want to use SASS to build my css files. Now, because Polymer forces me to keep the styles inside the <style> tag inside html files, I need a process to inline those css I create with SASS into my Polymer elements.

I'm trying to inline a certain css file into the <style> tag of an html file using gulp and the plugin gulp-inline-css. But no mater what I try, it just don't seem to work. Here are the files and their locations.

app/src/css/myapp/myapp.css

:host {
    display: block; 
}
.test-class{
    margin: auto;
}

app/src/myapp/myapp.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="myapp">
  <template>
    <style>
    </style>
    <link rel="stylesheet" href="../css/myapp/myapp.css">

    <myapp-header></myapp-header>
    <myapp-content></myapp-content>
    <myapp-footer></myapp-footer>

  </template>
  <script>
    Polymer({
      is: 'myapp',
      properties: {}
    });
  </script>
</dom-module>

gulpfile.js

gulp.task('test', function(){
  gulp.src('./src/myapp/myapp.html')
    .pipe(inlineCss({
      applyStyleTags: true,
      applyLinkTags: true,
      removeStyleTags: false,
      removeLinkTags: false
    }))
    .pipe(gulp.dest('./build'));
});

Instead of getting outputted the html with the css inlined, I get only the html, without any css inside the <style> tag.

Just to add some more info here, I tried to debug the plugin and inside it I see that it can extract the css correctly. It is just not "inlinning" it to the html file.

One super thanks for who help me out with this! Thanks in advance!

jonkemp · Accepted Answer · 2017-02-08 13:49:27Z

2

Sorry, but the plugin does not work this way. Here is how it is expected to work:

https://github.com/jonkemp/gulp-inline-css#how-it-works

It doesn't inline the CSS to the style tag. It inlines them to the element itself using the style attribute.

answered Feb 8, 2017 at 13:49

jonkemp

862 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nabeel Khan · Accepted Answer · 2017-02-04 21:17:33Z

0

CSS declaration should have type="css", making your code:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="myapp">
  <template>
    <style>
    </style>
    <link rel="stylesheet" type="css" href="../css/myapp/myapp.css">

    <myapp-header></myapp-header>
    <myapp-content></myapp-content>
    <myapp-footer></myapp-footer>

  </template>
  <script>
    Polymer({
      is: 'myapp',
      properties: {}
    });
  </script>
</dom-module>

answered Feb 4, 2017 at 21:17

Nabeel Khan

4,0613 gold badges28 silver badges42 bronze badges

1 Comment

FTM Over a year ago

Hello Nabeel! Thank you for your comment. But I just tried it out and it didn't work. I still have the file being outputted without the content of the css file. I tried with type="text/css" as well; it didn't work neither.

Collectives™ on Stack Overflow

CSS can't be inlined to style tag in html file using gulp-inline-css

app/src/css/myapp/myapp.css

app/src/myapp/myapp.html

gulpfile.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app/src/css/myapp/myapp.css

app/src/myapp/myapp.html

gulpfile.js

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related