国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Teilen oder fügen Sie Stile in mit Vite erstellte React-Komponentenbibliotheken ein
P粉464113078
P粉464113078 2024-01-10 17:00:11
0
1
698

Ich schreibe derzeit die Build-Schritte für die Komponentenbibliothek neu, um Vite zu verwenden. Ich habe ein Problem mit Stilen. Sie sind nicht aufgeteilt, sondern in einer gro?en style.css-Datei gebündelt. Das bringt mich zu zwei Fragen:

  • Wenn ich das Paket in ein anderes Projekt installiere, ist es nicht automatisch enthalten. Wenn ich eine Komponente importiere, wird style.css nicht auf magische Weise importiert.
  • Ich importiere Stile aus einer Komponente, die ich eigentlich nicht verwende.

In meinem vorherigen Setup hatte ich Style-Injection, was bedeutete, dass das CSS in die Komponente eingefügt und daher aufgeteilt wurde. Kann ich mit Vite etwas ?hnliches erreichen?

Mein aktuelles Build-Setup sieht so aus:

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

Endgültige dist 文件夾如下所示(我排除了所有 .d.ts Datei):

Wie Sie sehen, gibt es ein gro?es style.css, das nicht das ist, wonach ich suche.

Gibt es eine M?glichkeit, dieses Problem zu l?sen?

P粉464113078
P粉464113078

Antworte allen(1)
P粉007288593

如果您還沒有解決問題,我能找到的最簡單的方法是將插件 vite-plugin-css-injected-by-js 添加到 Vite,以內(nèi)部化生成的 CSS到JS文件中。

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

然后您可以將您的 vite 配置文件更改為:

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
});
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage