Импортировать внешние таблицы стилей в полимер 3

Есть ли способ импортировать внешние файлы css, которые влияют только на теневую DOM? Я работаю с sass и автоматически создаю файлы css, поэтому любые трюки с использованием импорта javascript невозможны.

Прямо сейчас у меня есть:

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

В Полимере 2 можно было сделать что-то вроде:

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

Есть ли способ получить то же самое с помощью полимера 3?


polymer polymer-3.x
person Valentin Sánchez    schedule 27.05.2018    source источник
comment
Под трюками с использованием импорта javascript вы также имеете в виду require() обработку файлов .css во время выполнения?   -  person Umbo    schedule 01.06.2018
comment
Я имею в виду, что я не могу / не хочу, чтобы скомпилированный файл css был строкой javascript. Я хочу, чтобы вывод файла css имел только содержимое css. Дайте мне знать, если вам что-то непонятно.   -  person Valentin Sánchez    schedule 01.06.2018

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать переменные в html-теге, например:

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 не поддерживает напрямую необработанные строковые переменные. удачи!

person Imskull    schedule 10.10.2018

arrow_upward
1
arrow_downward

это отлично работает для меня!

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>
    `;
person Emerson Bottero    schedule 07.11.2018