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 :
style.css
ne l'importe pas comme par magie. 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.ts
final) :
Comme vous pouvez le constater, il y a un gros style.css
, ce qui n'est pas ce que je recherche. p>
Existe-t-il un moyen de résoudre ce problème ?
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 :