Heim > Fragen und Antworten > Hauptteil
Ich schreibe derzeit die Build-Schritte für die Komponentenbibliothek neu, um Vite zu verwenden. Ich habe ein Problem mit Stilen. Sie sind nicht aufgeteilt, sondern in einer großen style.css-Datei gebündelt. Das bringt mich zu zwei Fragen:
style.css
nicht auf magische Weise importiert. In meinem vorherigen Setup hatte ich Style-Injection, was bedeutete, dass das CSS in die Komponente eingefügt und daher aufgeteilt wurde. Kann ich mit Vite etwas Ähnliches erreichen?
Mein aktuelles Build-Setup sieht so aus:
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import dts from "vite-plugin-dts"; export default defineConfig({ plugins: [react(), dts()], resolve: { alias: { "@": "/src" } }, build: { outDir: "dist", lib: { entry: "src/index.ts", name: "lib", fileName: format => `lib.${format}.js` }, rollupOptions: { external: ["react", "react-dom"], output: { globals: { react: "React", "react-dom": "ReactDOM" } } }, sourcemap: true }, css: { modules: { generateScopedName: "[name]__[local]___[hash:base64:5]" } } });
Endgültige dist
文件夹如下所示(我排除了所有 .d.ts
Datei):
Wie Sie sehen, gibt es ein großes style.css
, das nicht das ist, wonach ich suche. p>
Gibt es eine Möglichkeit, dieses Problem zu lösen?
P粉0072885932024-01-11 15:47:29
如果您还没有解决问题,我能找到的最简单的方法是将插件 vite-plugin-css-injected-by-js
添加到 Vite,以内部化生成的 CSS到JS文件中。
https://www.npmjs.com/package /vite-plugin-css-injected-by-js
然后您可以将您的 vite 配置文件更改为:
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import dts from "vite-plugin-dts"; // added the import for inject css automatically... import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' export default defineConfig({ plugins: [ react(), dts(), cssInjectedByJsPlugin(), ], // ... rest of your vite configuration });