Vite向Lit组件引入CSS/SASS如何避免样式额外打包进style.css

问题本质 #

Vite默认处理样式文件导入时，会同时执行两个逻辑：

• 将样式内容注入全局（开发环境直接插入页面style标签，生产环境打包到全局styles.css文件）
• 给default导入返回编译后的样式字符串
  你目前的用法只需要用到返回的样式字符串，不需要全局注入的逻辑，所以触发了样式污染、重复打包的问题。

解决方案 #

方案1：单文件快速处理（推荐） #

在导入sass文件的路径后追加?inline查询参数，明确告诉Vite跳过全局注入步骤，只返回样式字符串：

import { html, unsafeCSS, LitElement } from "lit";
// 路径后加?inline即可
import local_css from "/src/static/component_styles.sass?inline";

export class MyApp extends LitElement{
  static styles = unsafeCSS(local_css);
} 

该方案无需修改全局配置，Vite 2.0及以上版本原生支持，修改后即可解决开发环境全局污染、生产环境重复打包的问题。

方案2：批量自动处理 #

如果你的项目中有大量组件专属的sass文件，不想逐个手动加?inline，可以在vite.config.js中添加简单的自定义插件，给匹配规则的样式文件自动追加inline参数：

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'auto-inline-component-sass',
      transform(code, id) {
        // 匹配你存放组件专属样式的目录，可自行修改规则
        if (id.includes('/src/static/component_styles/') && /\.s[ac]ss$/.test(id)) {
          return code.replace(
            /import\s+([^\s]+)\s+from\s+(['"])(.*?)\2/g,
            'import $1 from $2$3?inline$2'
          )
        }
      }
    }
  ]
})

配置完成后，所有对应目录下的sass文件导入都会自动走inline逻辑，无需手动修改导入语句。

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