Pisahkan atau suntikan gaya dalam perpustakaan komponen React yang dibina dengan Vite
P粉464113078
P粉464113078 2024-01-10 17:00:11
0
1
480

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?

P粉464113078
P粉464113078

membalas semua(1)
P粉007288593

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
});
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan