vite-plugin-compelem-css

一个 Vite 插件：把 *.scss / *.sass / *.css 通过 ?tmpl导入时， 编译（SCSS）并用 compelem 的 css() 包装成一个真实的 CssTemplate。

import ButtonCss from "./Button.scss?tmpl"
export class Button extends CompElem {
  static get css() {
    return [ButtonCss]//-->无插件时 [css`${ButtonCss}`]
  }
}

安装

npm i -D vite-plugin-compelem-css
# 编译 .scss/.sass 还需要 sass（可选，仅用 .css 时不需要）
npm i -D sass
# 运行时依赖（使用方项目必须已安装）
npm i compelem

本插件把 compelem、sass、vite 声明为 peerDependencies（sass 为可选）。

用法

vite.config.ts：

import { defineConfig } from "vite"
import { compelemCss } from "vite-plugin-compelem-css"

export default defineConfig({
  plugins: [compelemCss()]
})

组件：

import { CompElem, css, tag } from "compelem"

// 1) 用 SCSS
import buttonCss from "./Button.scss?tmpl"

// 2) 用纯 CSS
import buttonCss from "./Button.css?tmpl"

@tag("c-button")
export class Button extends CompElem {
  static get css() {
    return [buttonCss]
  }
}

vite-env.d.ts：

declare module '*.scss?tmpl' {
  import type { CssTemplate } from 'compelem'
  const css: CssTemplate
  export default css
}
declare module '*.sass?tmpl' {
  import type { CssTemplate } from 'compelem'
  const css: CssTemplate
  export default css
}
declare module '*.css?tmpl' {
  import type { CssTemplate } from 'compelem'
  const css: CssTemplate
  export default css
}

选项

compelemCss({
  // 触发转换的 query 后缀，默认 "tmpl"
  // 设成 "foo" 后使用 import x from "./a.scss?foo"
  query: "tmpl",

  // 透传给 dart-sass compile 的额外选项
  sassOptions: {
    style: "expanded",
    loadPaths: ["src/styles"]
  }
})

许可证

MIT