Diviser ou injecter des styles dans les bibliothèques de composants React construites avec Vite

Question

Je suis actuellement en train de réécrire les étapes de construction de la bibliothèque de composants pour utiliser Vite. J'ai un problème avec les styles, ils ne sont pas divisés mais regroupés dans un gros fichier style.css. Cela m'amène à deux questions :

• Lorsque j'installe le package dans un autre projet, il n'est pas inclus automatiquement. Si j'importe un composant, style.css ne l'importe pas comme par magie.
• J'importe des styles à partir d'un composant que je n'utilise pas réellement.

Dans ma configuration précédente, j'avais une injection de style, ce qui signifiait que le CSS était injecté dans le composant et donc divisé. Puis-je réaliser quelque chose de similaire avec Vite ?

Ma configuration de build actuelle ressemble à ceci :

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

Fichier dist 文件夹如下所示（我排除了所有 .d.tsfinal) :

Comme vous pouvez le constater, il y a un gros style.css, ce qui n'est pas ce que je recherche.

Existe-t-il un moyen de résoudre ce problème ?

Answer 1

Si vous n'avez pas encore résolu le problème, le moyen le plus simple que j'ai pu trouver est d'ajouter le plugin vite-plugin-css-injected-by-js à Vite pour internaliser le CSS généré dans un fichier JS.

https://www.npmjs.com/package /vite-plugin-css-injected-by-js

Ensuite, vous pouvez modifier votre profil vite en :

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