我已经阅读了polymer 1.1中的新
style modules推荐,它的工作非常精彩.
我的问题在这里,与旧的方法一样,我怎样才能将我的所有CSS移动到CSS文件而不只是将它放在< style>之间. HTML中的标签?
这是一个例子.
我有一个自定义< ot-subscribe>看起来像这样的元素:
<dom-module id="ot-subscribe"> <template> <style> paper-input { --paper-input-container-underline: { display: none; }; --paper-input-container-underline-focus: { display: none; }; } </style> <form is="iron-form"> <paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input> <ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button> </form> </template> </dom-module>
这个例子很好用.
现在,我需要在外部CSS文件中移动CSS,但保持它们完全相同.所以最终的标记看起来像这样(我添加了评论来解释我尝试过的不同方法).
<dom-module id="ot-subscribe"> <template> <!-- Both of these have absolutely no effect --> <style type="text/css" src="external.css"></style> <style src="external.css"></style> <!-- This DOES work,however only for regular CSS,no custom properties or mixins would work --> <!-- Also,it's deprecated: https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets --> <link rel="import" type="css" src="external.css"> <!-- Using a style module DOES work,however we're just moving the issue,not solving it,since the CSS must still be in the HTML not in an external CSS file --> <style include="shared"></style> <form is="iron-form"> <paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input> <ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button> </form> </template> </dom-module>
有没有人遇到过这个问题?有没有人找到解决方案?
或者总结一下我的问题,如何使用聚合物Sass?
解决方法
据我所知,这是不支持的.有些工具可以自动从CSS文件创建样式模块.
https://github.com/Polymer/polymer/issues/2429
>构建步骤:https://github.com/MaKleSoft/gulp-style-modules
>网络服务:https://poly-style.appspot.com/demo/