gpt4 book ai didi

javascript - 如何将来自 React 组件库的 Tailwind CSS 样式包含到应用程序 CSS 包中?

转载 作者:行者123 更新时间:2023-12-05 00:38:03 25 4
gpt4 key购买 nike

天,
我正在使用 TailwindCSS 和 ViteJS 构建一个 React 组件库。该库将每个组件输出为单独的 JS 文件,例如:

// @components-library/src/ComponentA.jsx

export default function ComponentA() {
return <div className="flex justify-center">Component A</div>;
}
// Bundle Output: @components-library/dist/ComponentA.js

import { j as jsx } from "./jsx-runtime.js";
import "react";
function ComponentA() {
return /* @__PURE__ */ jsx("div", {
className: "flex justify-center",
children: "Component A",
});
}
export { ComponentA as default };
使用此组件库的应用程序也在使用 Tailwind。但是,样式不会应用于导入的组件。特定于应用程序的样式运行良好。
/* app/src/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
// app/src/App.jsx

import CompoenntA from "@component-library/ComponentA";
export default function App() {
return (
<div className="p-10">
<ComponentA />
</div>
);
}
等待专家建议。
谢谢!

最佳答案

目前,我也在做一个和你一样的元素。我用 构建了我的组件库汇总 .它生成了一个 CSS 文件,然后将该 CSS 文件导入到我的主包中。
我的汇总配置

import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import swc from "rollup-plugin-swc";
import filesize from "rollup-plugin-filesize";
const packageJson = require("./package.json");

export default [
{
input: "index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: false,
name: "@ht/components",
},
{
file: packageJson.module,
format: "esm",
sourcemap: false,
},
],
plugins: [
babel({
// this is needed because we're using TypeScript
babelHelpers: "bundled",
extensions: [".ts", ".tsx"],
}),
external(),
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
postcss({
config: {
path: "./postcss.config.js",
},
extensions: [".css"],
minimize: true,
extract: "lib.css",
}),
swc({
jsc: {
parser: {
syntax: "typescript",
},
target: "es2018",
},
}),
terser(),
filesize(),
],
},
];
主包索引
import "@ht/components/dist/cjs/lib.css";
import "./assets/css/tailwind.css";

关于javascript - 如何将来自 React 组件库的 Tailwind CSS 样式包含到应用程序 CSS 包中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70443359/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com