Lit-element | Unable to load scss into lit-element

Question

I'm on Mac, latest chrome using webpack 4 with the current webpack scss/css loaders (this is the before state of the required scss lit-element loaders etc...):

use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader', "sass-loader"]

I'm unable to successfully load scss into my lit-element component.

I have used the following examples and have failed:

https://github.com/drdreo/lit-scss-loader,

https://github.com/clicksolutions/lit-element-scss-loader,

https://blog.webf.zone/on-styling-web-components-b74b8c70c492

All of the above have failed.

Is there a way you can successfully load a scss file into a lit-element component at this stage as doing the inline way is very messy and I'm repeating my self a lot:

static get styles () {
return css`
.magic-class-name {
    margin: 0;
}
.magic-class-name .magic-class-name2 .magic-class-name3 {
    margin: 0;
}  `
etc...

Can you provide a more comprehensive extract of the webpack configs you have tried? Some more details about the failures would be helpful as well — Umbo
@Umbo Yup sure. Here is an example of the webpack css/sccs/sass loaders.. { test: /\.css|\.s(c|a)ss$/, use: [{ loader: 'lit-scss-loader', options: { minify: true, // defaults to false }, }, 'extract-loader', 'css-loader', 'sass-loader'], }, And the result is the web component does not render on page load and console does not have any errors at all which isn't helpful. So really just wondering if anyone has had success implementing scss and lit-element. — Kyle B
Ok, and how are you importing the styles in your component? (BTW if you want you can edit the question and put the code there for more clarity) — Umbo
@Umbo hey ya. This is exactly what I'm doing here: [github.com/drdreo/lit-scss-loader/blob/… — Kyle B
And still fails on me. I see my rendered web component but nothing inside it. — Kyle B

Nicfrai Nicfrai · Accepted Answer · 2020-07-21T04:11:57

I ran into this problem aswell and found my way around it in a 'hacky' way!

What i started doing was directly inject my scss into my lit-element as a string and 'parse' it using unsafeCSS!

You'll need installed "to-string-loader":

yarn add to-string-loader -D
npm install to-string-loader --save-dev

My webpack config (relevant part):

{
    test: /\.(s?)css$/,
    use: [
      // to inject the result into the DOM as a style block
      { loader: "to-string-loader" }, 
      {
        loader: "css-loader",
      },
      {
       // to convert SASS to CSS
        loader: "sass-loader",
      },
    ],
  },

Also don't forget to add scss/css to your extensions:

...
extensions: [".ts", ".js", ".scss", "css"],
...

With this Webpack will transpile your SCSS into CSS and insert its 'content' wherever it's required as a string!

in my classes I add the following to "static get styles()":

import {..., unsafeCSS, css } from "lit-element";

class WebComponent extends LitElement {
    static get styles() {
        return css`
          ${unsafeCSS(require("./path/to/your/styles.scss"))}
        `;
    }
}

Even if it's a bit hacky I still get the full intelissense of the IDE in my .scss styles!
And since there's no 'user input' in my scss file I'm not worrying too much about XSS either, even when using unsafeCSS().

Might not be the best but it's what I've done to make it work for now!

Good luck, I will watch this topic for better/improved answers aswell!

Lit-element | Unable to load scss into lit-element

1 Answers