When using the basic instructions with a Typescript project, tsc will complain:

TS2307: Cannot find module './style.scss' or its corresponding type declarations.

This is because Typescript doesn't think it can load SCSS files (even though Webpack makes that possible). It's necessary to trick Typescript into not complaining. This can be done by

1. Adding a global.d.ts file (or any declaration file really) like so:

declare module '*.scss';

2. Including it in tsconfig (don't import)

{
  "compilerOptions": {
    ...
  },
  "include": [
    "path/to/global.d.ts"
  ]
}

With that in place it should work properly.

Source: https://stackoverflow.com/a/41946697/278899

Hi there,
thank you so much for this great plugin. Everything works fine when developing components with lit-element and scss. I'd love to make use of storybook.js. When I start and build the storybook, an error says that SCSS can't be imported as a javascript module.

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/x-scss". Strict MIME type checking is enforced for module scripts per HTML spec.

My components import the SCSS like so:

import MwButtonStyles from './_mw-button.scss';

export class MwButton extends LitElement {
  static get styles() {
      return [ MwButtonStyles ]
  }

I even tried to do stuff like this in a _mw-button.js which I've imported to the lit-component then:

import MwButtonStyles from './_mw-button.scss';

export default MwButtonStyles;

and then import it again… but it doesn't work either for the same reason.

Do you have any pointers?

Thank you!

Are you planning on publishing it as an NPM in the nearest time? Thanks for this!

Hi there, it's a wonderful solution to include SCSS files into LitElement.

Are there any plans on supporting Webpack 5 in the future?

Is there an NPM release anytime soon? There is pretty much a very old version on NPM with wrong commands. And the readMe on Github is much sweeter as well.

With the new Lit I'm getting The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. warning.

To update to new lit I have this in my package.json:

"lit": "^2.0.0-rc.1", "lit-element": "^3.0.0-rc.1",

Hi there,
I already had a couple of SCSS loader rules defined in my webpack.config.js and wanted to install lit-scss-loader. This was the original file:
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.(scss)$/,
                use: [{
                    loader: 'style-loader', // inject CSS to page
                }, {
                    loader: 'css-loader', // translates CSS into CommonJS modules
                }, {
                    loader: 'postcss-loader', // Run post css actions
                }, {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader',
                ],
            },
        ]
    },
    plugins: [
        new HtmlWebPackPlugin( {
            template: "./src/index.html",
            filename: "./index.html"
        }),
    ]
}

Then I added the following block below (that's how I've understood your instructions):

{
        test: /\.css|\.s(c|a)ss$/,
        use: [{
          loader: 'lit-scss-loader',
          options: {
            minify: true, // defaults to false
          },
        }, 'extract-loader', 'css-loader', 'sass-loader'],
      },

And now I'm getting the following error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: property "css" must be followed by a ':'
        on line 1 of src/styles/main.scss
>> import {css} from 'lit-element'; export default css`@import url(https://font
   --------^

 @ ./src/styles/main.scss 2:26-390
 @ ./src/index.js

I think I misconfigured webpack and these SCSS rules need to be merged somehow. But I have no idea how. Can I kindly ask you for some pointers? :-)

Thank you!

If I add content rule to SCSS file, e.g.:

&::before {
     content: '\2014';
}

Result from scss processing will be empty <style></style> tag.

Setting up minify option to true removing svg properties cx, cy, r.

I think this behaviour coming from clean-css@v4 package

var CleanCSS = require('clean-css');
var input = `
  .test {
    cx: 0.5em;
    cy: 0.5em;
    fill: none;
    r: 0.2em;
  }
`;
var options = { /* options */ };
var output = new CleanCSS(options).minify(input);

console.log(output.styles);

By changing it to clean-css version 5, should fix this issue

Hi,

Really like this package - it made our lives much easier when looking support scss in lit. Thanks for your contribution!

Just a suggestion, as I recently spent a few hours trying to add ie11 support to a lit-based project; ended up discovering it was the extract-loader in this package which was converting scss -> js and was being ignored by our babel-loader. It was particularly confusing because older browsers give no context to the error and just shows a lit-element css.ts file (which I assume is being imported in templateGenerator.js via generateCSSImport) as being the cause of the issue.

Normally your babel-loader config looks something like this:

    module: {
      rules: [
        {
          test: /\.js$|\.ts$/,
          use: {
            loader: 'babel-loader',
....

Was able to resolve the issue by simply doing the following

    module: {
      rules: [
        {
          test: /\.js$|\.ts$|\.s(c|a)ss$/,
          use: {
            loader: 'babel-loader',

There might be other ways to do this, but it def could save future users some time if they are using with tools like babel. Thanks!

import {css} from 'lit-element'; export default css`:host{...}`

The backticks cause an error IE11. Would it be possible to use quotes here?

Requiring webpack 5 instead of webpack 4 was a breaking change. It should be accompanied by increasing the major version and not the minor. Projects depending on ^1.0.0 of lit-css-loader got broken unexpectedly, when you rele3ased 1.1.0. Many other projects did the upgrade to webpack 5 properly (copy-webpack-plugin, css-loader, sass-loader, style-loader, ...).

How about fixing the problem by retaining the webpack 4 support in the 1.x releases and introducing the webpack 5 support in 2.x releases? For example:

1.1.1 - you could republish the 1.0.1 with the webpack 4 support to fix the 1.1.0
2.0.0 - you could republish the current 1.1.0 content as 2.0.0