Issue
Having a polymer project using the material color definitions in import 'package:polymer_elements/color.dart';
The references to css styling e.g. var(--paper-green-300);
works ok, when they are placed in the <style></style>
section for the element, but when I move this to the style.css, they aren’t found. I have tried with different combinations of include in index.html and index.dart. E.g. in index.html at <head>
section <link rel="import" href="packages/polymer_elements/color.html">
but doesn’t seems to do the trick. Anyone who have experience with similar issues?
Of course not a high prio project killer, simple to use the hard coded values or leave the definitions in the <style>
section for every element. But this way things will be more tidy.
Environment
Dart version 1.14.0
WebStorm 11.0.3
From pubspec.yaml:
environment:
sdk: '>=1.9.0 <2.0.0'
dependencies:
polymer: ^1.0.0-rc.15
web_components: ^0.12.0
polymer_elements: 1.0.0-rc.8
browser: ^0.10.0
reflectable: ^0.5.0
polymer_interop: ^1.0.0-rc.5
Solution
CSS variables in Polymer only work in <style is="custom-style">
and therefore not in .css
files.
is="custom-style"
is implicit for style tags within Polymer elements and can and should be omitted.
Answered By – Günter Zöchbauer
Answer Checked By – Robin (FlutterFixes Admin)