remove warning about vite not finding custom code at build time

2026-03-21 21:37:29 +00:00 · 2023-06-27 19:23:13 +02:00
parent e208d4ae1e
commit efe32e86c9
2 changed files with 29 additions and 3 deletions
--- a/commafeed-client/index.html
+++ b/commafeed-client/index.html
@@ -4,13 +4,11 @@
  <meta charset="UTF-8" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="manifest" href="manifest.json" />
-  <link rel="stylesheet" href="custom_css.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>CommaFeed</title>
 </head>
 <body>
 <div id="root"></div>
 <script type="module" src="/src/main.tsx"></script>
-<script src="custom_js.js"></script>
 </body>
 </html>
--- a/commafeed-client/vite.config.ts
+++ b/commafeed-client/vite.config.ts
@@ -1,13 +1,41 @@
 import { lingui } from "@lingui/vite-plugin"
 import react from "@vitejs/plugin-react"
 import { visualizer } from "rollup-plugin-visualizer"
-import { defineConfig } from "vite"
+import { defineConfig, PluginOption } from "vite"
 import eslint from "vite-plugin-eslint"
 import tsconfigPaths from "vite-tsconfig-paths"

+// inject custom js and css links in html
+const customCodeInjector: PluginOption = {
+    name: "customCodeInjector",
+    transformIndexHtml: html => {
+        return {
+            html,
+            tags: [
+                {
+                    tag: "script",
+                    attrs: {
+                        src: "custom_js.js",
+                    },
+                    injectTo: "body",
+                },
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        href: "custom_css.css",
+                    },
+                    injectTo: "head",
+                },
+            ],
+        }
+    },
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
    plugins: [
+        customCodeInjector,
        react({
            babel: {
                // babel-macro is needed for lingui