Не могу импортировать CSS из MDCTextField для стилизации дочерних элементов MDCTextField в WebComponent на основе LitElement

Как импортировать CSS в модуль ES6?

Я получаю следующую ошибку в консоли браузера;

Не удалось загрузить сценарий модуля: сервер ответил типом MIME, отличным от JavaScript, "text/css". Строгая проверка типов MIME применяется для скриптов модулей в соответствии со спецификацией HTML.

Модуль ниже:

import { LitElement, html, css } from "lit-element";
import { MDCTextField } from "@material/textfield";
import style from "@material/textfield/dist/mdc.textfield.css";

export class MyWC extends LitElement {
  static get styles() { return style; } //was using return css'...'

  render() {
    return html`
      <label class="mdc-text-field mdc-text-field--textarea">
        <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
        ...blah blah blah...
      </label>
    `;
  }

@material/textfield и lit-element установлены через npm ОК. Я использую es-dev-сервер на Linux.

ps. Я хочу использовать веб-компоненты MDC, но сделать все как можно проще.

Любая помощь приветствуется - спасибо.


lit-element mdc-components
person Cy Walker    schedule 11.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В настоящее время спецификация HTML позволяет использовать только import модули javascript. Это обеспечивается путем проверки того, что MIME тип импортируемого файла - это файл javascript, поэтому вы получаете ошибку. Тот факт, что в некоторых средах (особенно с упаковщиками/транспилерами) возможен импорт других типов ресурсов, может создаться ложное впечатление, что это происходит и в браузере.

Чтобы использовать этот вид импорта

import style from "@material/textfield/dist/mdc.textfield.css";

вам понадобится какой-нибудь инструмент, способный преобразовать его в CSSResult . В типичном сценарии используются сборщики, такие как Rollup или Webpack со специальными плагинами/загрузчиками (например, rollup-plugin-lit-css или lit-css-loader).

person Umbo    schedule 12.05.2020