Импорт внешних таблиц стилей в полимер 3 - PullRequest
Новая
       6

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

0 голосов
/ 27 мая 2018

Есть ли способ импортировать внешние CSS-файлы, которые влияют только на теневой DOM?Я работаю с 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 добиться того же?

Ответы [ 3 ]

0 голосов
/ 07 ноября 2018

это прекрасно работает для меня! 

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>
    `;
0 голосов
/ 10 марта 2019

Последний подход предоставлен в официальной документации полимера 3 здесь.Ctrl + F и Поиск Share styles between elements нажмите здесь

0 голосов
/ 10 октября 2018

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

...