@bosh-code/tsdown-plugin- inject-css (英语)
输入 CSS 导入到所建文件的顶端 s。 。 。 .
在构建过程中, tsdown 将 CSS 从您的源文件导入 。 此插件跟踪这些导入和 重新将它们输入已建文件.
安装
安装插件 :
# npm
npm install -D @bosh-code/tsdown-plugin-inject-css
# yarn
yarn add -D @bosh-code/tsdown-plugin-inject-css
# pnpm
pnpm add -D @bosh-code/tsdown-plugin-inject-css
把它加进你的 tsdown.config.ts数字 :
// tsdown.config.ts
import { injectCssPlugin } from '@bosh-code/tsdown-plugin-inject-css';
export default defineConfig({
external: ['preact'],
plugins: [
injectCssPlugin()
]
});
示例
来源文件 :
组件文件 :
/* src/greeting.css */
/* Add component styles here */
.greeting {
color: red;
}
// src/greeting.tsx
import './Foo.css';
export const Greeting = () => <div class="greeting">Hello World</div>;
图书馆入口:
/* src/index.css */
/* Add global styles here */
html {
background-color: blue;
}
// src/index.ts
import './index.css';
export { Greeting } from './greeting'
已建文件 :
/* dist/index.css */
html {
background-color: blue;
}
.greeting {
color: red;
}
/* Gorgeous colour theme, I know. */
// dist/index.js
import { jsx as e } from 'preact/jsx-runtime';
import './index.css'; // Injected by plugin
const t = () => e(`div`, { className: `greeting`, children: `Hello World` });
export { t as Greeting };
方式和原因
此插件为 严重 灵感来自 vite- plugin- lib- inject- css (中文(简体) ) 不过 我改编了它 专门和Tsdown合作.
我做这个是因为我想用tsdown来建造我的预告组件库.
这个 应 与多个切入点合作, 但我还没有尝试。 我得到了它为我的项目工作 并称它很好.
欢迎捐款!
许可证
MIT 代码
