Cant import CSS from MDCTextField to style MDCTextField child elements in LitElement based WebComponent

Question

How do you import CSS into a ES6 module?

I receive the following error in browser console;

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

Module below:

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 installed via npm OK. I'm using es-dev-server on linux.

ps - I want to use MDC web components but keep things as simple as possible.

Any help appreciated - Thanks.

Umbo · Answer 1 · 2020-05-13T07:37:59.833

The HTML spec currently only allows to import javascript modules. This is enforced by checking that the MIME type of the imported file is a javascript one, hence the error you're getting. The fact that in some environments (especially with bundlers/transpilers) importing other resource types is possible may give the wrong impression that it is case also in the browser.

To use this kind of import

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

you would need some tool capable of transforming it into a CSSResult. A typical scenario is using bundlers like Rollup or Webpack with dedicated plugins/loaders (ie rollup-plugin-lit-css or lit-css-loader).

Cant import CSS from MDCTextField to style MDCTextField child elements in LitElement based WebComponent

1 Answers1