Automatically generate the style-wrapper that is required for LitElement, simply by importing the CSS/SCSS file
npm install lit-scss-loader
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.
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.
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