CSS 无法使用 gulp-inline-css 内联到 html 文件中的样式标签

Question

所以，我已经在这方面竭尽全力了。我正在使用 Polymer 来构建组件。但我仍然想使用 SASS 来构建我的 css 文件。现在，因为 Polymer 强制我将样式保留在 html 文件内的 <style> 标签内，我需要一个过程来将我用 SASS 创建的那些 css 内联到我的 Polymer 元素中.

我正在尝试将某个 css 文件内联到 html[ 的 <style> 标签中=46=] 文件使用 gulp 和插件 gulp-inline-css。但是无论我尝试什么，它似乎都行不通。这是文件及其位置。

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')); });

我没有输出内联 css 的 html，而是只输出 html，[=] 中没有任何 css 17=] 标签.

只是为了在此处添加更多信息，我尝试调试插件并在其中看到它可以正确提取 css。它只是不 "inlinning" 它到 html 文件。

非常感谢帮助我解决这个问题的人！提前致谢！

Answer 1

CSS 声明应该有 type="css"，使你的代码：

<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>

Answer 2

抱歉，该插件无法以这种方式工作。以下是它的预期工作方式：

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

它不会将 CSS 内联到样式标签。它使用样式属性将它们内联到元素本身。

CSS 无法使用 gulp-inline-css 内联到 html 文件中的样式标签

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

javascript

css

inline

gulp

app/src/css/myapp/myapp.css

app/src/myapp/myapp.html

gulpfile.js