在Lit库的TSUP构建中配置SCSS加载器的方法

安装必要依赖 #

TSUP基于esbuild实现，本身不支持SCSS编译，需要安装对应的esbuild插件和SCSS核心编译工具：

npm install esbuild-sass-plugin sass --save-dev

修改tsup配置文件 #

在tsup.config.js中引入SCSS插件，并配置适配NPM包发布的相关参数：

import { defineConfig } from 'tsup';
import { sassPlugin } from 'esbuild-sass-plugin';

export default defineConfig({
  entry: ['src/index.ts'], // 你的库入口文件
  format: ['cjs', 'esm'], // NPM包通常需同时支持CommonJS和ESM两种模块格式
  dts: true, // 自动生成类型声明文件，方便用户使用时获得类型提示
  clean: true, // 构建前自动清理输出目录
  external: ['lit'], // 排除Lit依赖，让用户自行安装，避免重复打包
  plugins: [
    sassPlugin({
      type: 'css', // 输出适配Lit组件的原生CSS格式
    }),
  ],
  esbuildOptions: opts => {
    // 让esbuild识别SCSS和CSS文件的导入
    opts.resolveExtensions = ['.ts', '.js', '.scss', '.css'];
  },
});

调整Lit组件中SCSS的引用方式 #

在组件文件中使用断言语法导入编译后的CSS，直接作为组件样式使用：

import { LitElement, html } from 'lit';
import styles from './my-component.scss' assert { type: 'css' };

class MyComponent extends LitElement {
  static styles = styles;

  render() {
    return html`<div class="demo">示例内容</div>`;
  }
}

验证构建结果 #

运行TSUP构建命令测试：

npx tsup

此时SCSS会被自动编译为CSS并整合到组件中，不会再出现“No loader is configured for ".scss"”错误。

内容的提问来源于stack exchange，提问作者ineedtoknow