為什么Dart Polymer將主要的CSS文件內聯/硫化到 <head> 標簽？

Question

網頁/模板/ 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>

...

網頁/模板/ UI-elements.dart

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

...

網絡/ main.dart

import 'package:polymer/polymer.dart';

main() {
  initPolymer();
}

@whenPolymerReady
void onReady() {
}

web / main.html （在pub 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.html （ pub 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>

相關問題：

如何避免main.css文件的“內聯/ ulcanazing”內容？
為什么外幣聚合物這么大的輸出文件： main.html.polymer.bootstrap.dart.js （323KB）， polymer.min.js （121KB）， webcomponents.min.js （103KB）。 在不久的將來會有什么變化嗎？
還有其他一些文件，Polymer不會自動包含在已編譯的main.html （請參見屏幕）：
- main.web_components.bootstrap.dart
- main.dart.js

在此處輸入圖片說明

附加屏幕：

在此處輸入圖片說明

Answer 1

您可以在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

為什么Dart Polymer將主要的CSS文件內聯/硫化到 <head> 標簽？

問題描述

1 個解決方案

解決方案1
1 已采納 2015-04-28 09:55:38

為什么Dart Polymer將主要的CSS文件內聯/硫化到 <head> 標簽？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-04-28 09:55:38

解決方案1
1 已采納 2015-04-28 09:55:38