Saya sedang menulis semula langkah binaan untuk perpustakaan komponen untuk menggunakan Vite. Saya menghadapi masalah dengan gaya, ia tidak dipecahkan tetapi digabungkan ke dalam satu fail style.css yang besar. Ini membawa saya kepada dua soalan:
style.css
tidak mengimport secara ajaib. Dalam persediaan saya sebelum ini, saya mempunyai suntikan gaya, yang bermaksud CSS telah disuntik ke dalam komponen dan oleh itu berpecah. Bolehkah saya mencapai sesuatu yang serupa dengan Vite?
Persediaan binaan semasa saya kelihatan seperti ini:
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]" } } });
Akhir dist
文件夹如下所示(我排除了所有 .d.ts
fail):
Seperti yang anda lihat, terdapat style.css
besar, yang bukan yang saya cari. p>
Adakah cara untuk menyelesaikan masalah ini?
Jika anda masih belum menyelesaikan masalah itu, cara paling mudah yang saya temui ialah menambahkan pemalam
vite-plugin-css-injected-by-js
ke Vite untuk menginternalisasi CSS yang dijana ke dalam fail JS.https://www.npmjs.com/package /vite-plugin-css-injected-by-js
Kemudian anda boleh menukar profil vite anda kepada: