Loading scss files in typescript using webpack

Component.ts

import { LitElement, html, customElement, property } from "lit-element";
import style from "./Style";

@customElement('my-component')
class MyComponent extends LitElement {

  static styles = style;
  
  render() {
    return html`<p>Styled component</p>`;
  }
}

Style.ts

declare function require(moduleName: string): any;

import { css } from "lit-element";

const style = require('./styles.scss');
export default css(<any>[style]);

webpack.config.js

module.exports = async function (_, env) {
  return {
    resolve: { extensions: [".js", ".ts"] },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: "css-loader",
              // options: { modules: true }
            },
            {
              loader: "sass-loader",
              options: {
                sassOptions: { includePaths: ['./node_modules'] }
              }
            },
          ]
        }
      ]
    },