3

我想在 Bootstrap 主题中使用 CSS 变量，以便将来可以方便地更改主题的配色方案。

此图表显示 Firefox 是目前唯一支持 CSS 变量的浏览器。

问题

如何使用 Polymer 的 Polyfills 填充对 CSS 变量的跨浏览器支持？

我使用 Yeoman Polymer Generator 中的 Polymer Starter Kit 搭建了这个项目。我用 Bootstrap 主题替换了 PSKapp目录，并将原来的 app 目录重命名为app1，主题目录重命名为app.

我知道一切都已正确配置，因为它使用 Firefox 可以按预期工作。所以我只需要专注于让 Polyfills 工作。

我在我的index.html. 但它不起作用。

索引.html 
<head>
  ...
  <link rel="stylesheet" type="text/css" href="css/theme-mod.css">
  ...
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- Tried with and without the following -->
  <script type="text/javascript" src="scripts/app.js"></script>   
  ...
</head>

编辑：与 Polystyles 相关的 其他问题。

文档令人困惑。例如，url 参数应该是什么以及做什么？像进口一样吗？如果我的 dom 模块是本地文件，它可以指向内部路径或文件吗？另外，dom-module 是一个 .css 文件还是一个 .html 文件，就像我见过的其他 DOM 模块/元素一样？

4

2 回答 2

1

尝试使用它（当您通过 CDN 链接 CSS 时更好）：https ://poly-style.appspot.com/demo/或者在您的情况下这可能更好：https ://github.com/MaKleSoft/gulp-样式模块

于 2015-12-08T08:01:08.530 回答
0

我在 Polystyles 的 github 存储库中找到了这个演示。

https://github.com/PolymerLabs/polystyles/blob/master/demo/elements.html

它使用以下导入，这表明url参数应链接到.css文件。

<link rel="import"
href="../?id=polymer-styles&url=https://www.polymer-project.org/css/polymer.css">
于 2015-12-08T20:56:28.220 回答