如何为基于Webpack构建的Lit web组件引入SCSS样式表？

步骤1：安装必需的Webpack loader #

npm install --save-dev lit-scss-loader extract-loader

步骤2：修改webpack.config.js的样式处理规则 #

你之前的配置使用style-loader会直接把CSS插入到全局document的head中，不会返回CSS内容给JS导入，而Lit组件的Shadow DOM是样式隔离的，全局样式默认无法作用到组件内部，所以需要替换样式处理规则：

{
  test: /\.(scss|css)$/,
  use: [
    'lit-scss-loader',
    'extract-loader',
    'css-loader',
    'sass-loader',
  ],
}

loader执行顺序从后往前：

• 先执行sass-loader：将SCSS代码编译为原生CSS，Bootstrap的mixin、变量都会在这一步完成处理
• 再执行css-loader：处理CSS中的@import、url()等资源引用
• 再执行extract-loader：把处理完成的CSS转为纯字符串输出
• 最后执行lit-scss-loader：自动把CSS字符串包装为Lit组件支持的CSSResult类型，可以直接赋值给static styles属性

步骤3：添加TypeScript类型声明（TS项目必需） #

如果导入SCSS时TS报模块不存在的错误，在src目录下新建types/scss.d.ts文件，内容如下：

declare module '*.scss' {
  import type { CSSResultGroup } from 'lit';
  const content: CSSResultGroup;
  export default content;
}

然后在tsconfig.json的include字段里加上"src/types/**/*.d.ts"即可。

验证使用 #

配置完成后你原来的组件代码不需要修改，直接用以下写法就可以正常生效：

import styles from './example-component.scss';

@customElement('example-component')
class ExampleComponent extends LitElement {
  // 直接赋值即可，不需要额外用css()包裹
  static styles = styles;

  render() {
    return html`
      <div class="example-component">
        <h1>Yaay! Example component.</h1>
      </div>
    `;
  }
}

内容的提问来源于stack exchange，提问作者Guilherme L. Moraes