Pisahkan atau suntikan gaya dalam perpustakaan komponen React yang dibina dengan Vite

Question

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:

• Apabila saya memasang pakej ke projek lain, ia tidak disertakan secara automatik. Jika saya mengimport komponen, style.css tidak mengimport secara ajaib.
• Saya mengimport gaya daripada komponen yang sebenarnya saya tidak gunakan.

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.

Adakah cara untuk menyelesaikan masalah ini?

Answer 1

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:

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
});