![](\"https://www.polymer-project.org/images/logos/p-logo.png\"){kind=logo}
\r\n ![](\"https://cdn.worldvectorlogo.com/logos/css-3.svg\")
\r\n \r\n ![](\"https://webpack.js.org/assets/icon-square-big.svg\"){kind=icon}
\r\n \r\n\r\nIt is a fork of polymer-css-loader! But since the loader was only developed for polymer, I adopted it for lit-element, now lit.\r\n\r\n\r\n# lit-scss-loader\r\n\r\nA loader for webpack that lets you import the CSS/SCSS into your lit-element and automatically creates the styling\r\nJavaScript for you.\r\n\r\n
\r\nWhile 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.\r\n\r\n\r\n## Install:\r\n\r\n```\r\nnpm i -D lit-scss-loader extract-loader\r\n```\r\n\r\n## Requirements\r\n\r\n* Lit\r\n* Webpack 4/5 ('extract-loader', 'css-loader', 'sass-loader')\r\n\r\n# How this works:\r\n\r\n1. 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\r\n you're using sass-loader, less-loader and/or css-loader\r\n\r\n```javascript\r\nmodule.exports = {\r\n entry: './src/index.js',\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.css|\\.s(c|a)ss$/,\r\n use: [{\r\n loader: 'lit-scss-loader',\r\n options: {\r\n minify: true, // defaults to false\r\n },\r\n }, 'extract-loader', 'css-loader', 'sass-loader'],\r\n },\r\n ],\r\n },\r\n};\r\n```\r\n\r\n2. Include your .css or .scss or .less file in your JavaScript:\r\n\r\n```javascript\r\nimport {html, LitElement} from 'lit';\r\n\r\nimport Style1 from './style-1.scss';\r\nimport Style2 from './style-2.css';\r\n\r\nclass LitTestComponent extends LitElement {\r\n\r\n constructor() {\r\n super();\r\n this.prop1 = '🔥-app';\r\n }\r\n\r\n static get properties() {\r\n return {\r\n prop1: {\r\n type: String\r\n }\r\n };\r\n }\r\n\r\n static get styles() {\r\n return [Style1, Style2];\r\n }\r\n\r\n render() {\r\n return html`\r\n
This is the test component
\r\nThis is the propertie's value: ${this.prop1}
\r\n