0

I'm trying to implement a Lit component with some scss styling. Below is the component as it is right now:

import { html, LitElement } from 'lit-element';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';

// Components
import 'inputmessage';

// Styles
import styles from './input-styles.scss';

export default class Input extends ScopedElementsMixin(LitElement) {
  constructor() {
    super();
  }

  static get properties() {
    return {
      label: { type: String, attribute: 'label' },
      id: { type: String, attribute: 'id' },
      value: { type: String, attribute: 'value' },
      statusMessage: { type: String, attribute: 'status-message' },
      statusType: { type: String, attribute: 'status-type' },
      required: { type: Boolean, attribute: 'required' },
      placeholder: { type: String, attribute: 'placeholder' },
      type: { type: String, attribute: 'type' },
    };
  }

  static get scopedElements() {
    return {
      'inputmessage': customElements.get('inputmessage'),
    };
  }

  static get styles() {
    return [styles];
  }

  render() {
    return html`
            <div>
                ${this.label && html`<label class="input-label" for="${this.id}">${this.label}</label>`}
                <input type="${this.type}" required="${this.required}" value="${this.value}" placeholder="${this.placeholder}" id="${this.id}" name="${this.id}" />
            </div>
        `;
  }
}

The CSS styles are in scss and only include the .input-label class. Now when I try to render the component on the screen it doesn't appear and I see the following message in the console output:

enter image description here

It seems the styles are not being picked up for some reason. I added the lit-scss-loader in my dependencies, but that also doesn't work. Anyone knows what I should do?

Ricardo de Vries
  • 113
  • 3
  • 11
  • 1
    Personally, I would take a step back and learn to create Web Components with native JavaScript only. Once you understand the **Technology** you will have no problems understanding where or why **Tools** fail. – Danny '365CSI' Engelman Aug 16 '22 at 15:27
  • Have you validated it also fails without ScopedElementsMixin? – abraham Aug 16 '22 at 21:55

1 Answers1

0

You need to use css tagged template function and unsafeCSS(str) function to make use of CSS imported into a string:

import { html, LitElement, css, unsafeCSS } from 'lit-element';


// later, inside your component class:
    static get styles() {
        return css`${unsafeCSS(styles)}`;
    }

I have no clue what translates your SCSS, stopped using pre-processors years ago.

connexo
  • 53,704
  • 14
  • 91
  • 128