It is a fork of polymer-css-loader! But since the loader was only developed for polymer, I adopted it for lit-element, now lit.

lit-scss-loader

A loader for webpack that lets you import the CSS/SCSS into your lit-element and automatically creates the styling
JavaScript for you.

While this loader has worked well on my Windows machine, there may still be unforeseen bugs. Even though I put the package to v1.0 be cautious when using it in production.

Install:

``
npm i -D lit-scss-loader extract-loader
`

Requirements

* Lit
* Webpack 4/5 ('extract-loader', 'css-loader', 'sass-loader')

How this works:

1. Include it in your Webpack Config. Include it "last" _(webpack loader order!)_ or after all other loaders have been applied. You will need to use extract-loader if
you're using sass-loader, less-loader and/or css-loader

`javascript
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css|\.s(c|a)ss$/,
use: [{
loader: 'lit-scss-loader',
options: {
minify: true, // defaults to false
},
}, 'extract-loader', 'css-loader', 'sass-loader'],
},
],
},
};
`

2. Include your .css or .scss or .less file in your JavaScript:

`javascript
import {html, LitElement} from 'lit';

import Style1 from './style-1.scss';
import Style2 from './style-2.css';

class LitTestComponent extends LitElement {

constructor() {
super();
this.prop1 = '🔥-app';
}

static get properties() {
return {
prop1: {
type: String
}
};
}

static get styles() {
return [Style1, Style2];
}

render() {
return html

This is the test component

This is the propertie's value: ${this.prop1}

;
}
}

customElements.define('lit-test-component', LitTestComponent);
`

$3

If you're using this loader in a Typescript project, you will also need to inform the compiler that it has the ability
to load CSS/SCSS files. This project already provides the module declarations, so all you need to do is include the type
declaration file in your tsconfig.json file.

`json
{
"compilerOptions": {
"...": "..."
},
"include": [
"node_modules/lit-scss-loader/types.d.ts"
]
}
`

Options

| Name | Type | Default | Description |
|------|------|---------|-------------|
|minify|{Boolean}|false|When true, it will minify both the CSS and JavaScript output.
|~~defaultSkip~~|{Boolean}|false| (dep.) When true, will skip all imports except those explicilty marked.

Files Parameters (obsolete)

_These were applicable when using Polymer 3. With lit, everything is better._

They are appended at the end of the CSS imports in your JavaScript file (Where the component is declared); E.g:

`javascript
import './style-2.css?include';
import './style-1.css?skip';
`

| Name | Type | Default | Description |
|------|------|---------|-------------|
|skip| {boolean}| N/A |Setting this parameter will skip the import altogether. This may be useful if you're using React and Lit or you'd like to include the CSS without. E.g: import './style-2.css?skip' |
|include | {boolean} | N/A | Just setting this parameter will include the css even when defaultSkip is on. This may be useful if you just want to "litify" or "web-componentize" a .css/.scss/.less file. E.g: import './style-2.css?include'. Note: include will take preference over skip. |

Need an example?

First build lit-scss-loader with npm run build inside the root, then navigate to test-app and execute: npm start. It will
launch an express server @ localhost:3000.

Legacy Support

The loader automatically injects code (e.g. import {css} from 'lit';) into your files, therefore, pay attention if you
need es5 / legacy browsers support. As LambyPants mentioned, you
might have to adopt your loaders configuration to also test for `/\.js$|\.ts$|\.s(c|a)ss$/`` and transform it to your
needed language support.

Why this loader?

When using css for components inline or inside a javascript file we will lose auto-completion or any analysis tools
that are already out there for plain CSS/SCSS files. Also, designer may don't want to work inside .js files. Let them
work with what they are used to.

With this, you just import your .css in your lit-component, add the style-variable to the static get styles() and you're
set! The loader takes care for creating the content of that variable!

Ideas? Feedback?

Open a GitHub issue now! 😊