在聚合物 3 中导入外部样式表答案

【问题标题】：Import external stylesheets in polymer 3在聚合物 3 中导入外部样式表
【发布时间】：2018-05-27 03:36:21
【问题描述】：

有没有办法导入只影响影子 DOM 的外部 css 文件？我正在使用 sass 并自动创建 css 文件，因此无法完成使用 javascript 导入的任何技巧。

现在，我拥有的是：

static get template() {
return html`
  <style>
  :host {
    display: block;
  }
  </style>
  ....
}

在 Polymer 2 中，可以执行以下操作：

 <dom-module id="my-app">
   <link rel="stylesheet" href="style.css">
   <template></template>
 </dom-module>

有没有一种 Polymer 3 方法可以实现相同的目标？

【问题讨论】：

“使用 javascript 导入的技巧”您还指 require()在运行时处理 .css 文件？
我的意思是我不能/不想让编译后的 css 文件成为 javascript 字符串。我希望 css 文件的输出只有 css 内容。如果不清楚，请告诉我。

标签： polymer polymer-3.x

【解决方案1】：

这对我很有用！

return html`
      <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
      <style>

/* I had to put !important to override the css imported above. */
      </style>

      <divclass="blablabla"></div>
    `;

【讨论】：

【解决方案2】：

您可以在 html-tag 中使用变量，如下所示：

import { htmlLiteral } from '@polymer/polymer/lib/utils/html-tag.js';

import myCSS from "style.css";
let myCSSLiteral = htmlLiteral(myCSS);
...
class MyElement extends PolymerElement {
  static get template() {
    return html`<style>${myCSSLiteral}</style>...`;
    ...
  }
  ...
}

请注意：您必须将变量从字符串转换为 htmlLiteral 才能在html-tag 中使用，尽管我不知道为什么 Polymer 不直接支持原始字符串变量。祝你好运！

【讨论】：