Issue
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.html (entry file before 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 (entry file after 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>
Related questions:
- How to avoid “inlining/vulcanazing” content of main.css file?
- Why creats Polymer such a big output file:
main.html.polymer.bootstrap.dart.js(323kb),polymer.min.js(121kb),webcomponents.min.js(103kb). Does something change in the near future? - There are also other files that Polymer doesn’t include into compiled
main.htmlautomatically (please, see the screen):main.web_components.bootstrap.dartmain.dart.js
Additional screen:
Solution
You can configure this behavior in the Polymer transformer config in the pubspec.yaml file like
transformers:
- polymer:
entry_points:
...
inline_stylesheets:
web/asset/examples.css: false
lib/asset/smoothness/jquery-ui-1.8.16.custom.css: false
Answered By – Günter Zöchbauer
Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)