为什么 Dart Polymer inlines/vulcanize main css 文件进入 <head> 标签?

Why Dart Polymer inlines/vulcanize main css file into <head> tag?

web/templates/ui-elements.html

<polymer-element name="app-element">
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <div class="classes from main-css file"></div>
    <content></content>
  </template>
  <script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>

<polymer-element name="ui-icon" attributes="name" noscript>
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <span class="fa fa-{{name}}"></span>
  </template>
</polymer-element>

...

web/templates/ui-elements.dart

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();
}

...

web/main.dart

import 'package:polymer/polymer.dart';

main() {
  initPolymer();
}

@whenPolymerReady
void onReady() {
}

web/main.htmlpub build之前的入口文件)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="import" href="templates/ui_elements.html"/>
  </head>
  <body>
    <app-element></app-element>
    <script type="application/dart" src="main.dart"></script>
  </body>
</html>

web/main.htmlpub build之后的入口文件)

<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
    ...HERE IS FULL CONTENT OF main.css...
    </style>
</head><body>
...
HERE ARE ELEMENTS THAT ALSO USE main.css, so it's also downloading
<polymer-element name="ui-icon" attributes="name" noscript>
  <template>
    <link rel="stylesheet" href="/main.css"/>
    <span class="fa fa-{{name}}"></span>
  </template>
</polymer-element>
...

 <script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>

相关问题:

附加屏幕:

您可以在 pubspec.yaml 文件的 Polymer 转换器配置中配置此行为,例如

transformers:
- polymer:
    entry_points:
    ... 
    inline_stylesheets:
      web/asset/examples.css: false
      lib/asset/smoothness/jquery-ui-1.8.16.custom.css: false