search

feat-agency / vite-plugin-webfont-dl

⚡ Webfont Download Vite Plugin - Make your Vite site load faster
MIT License
302 stars 11 forks source link

Missing CSS in production because `indexHtmlPath` isn't correctly stripped #18

Closed cewald closed 1 year ago

cewald commented 1 year ago

I'm having trouble with the production build when the public-base-path of vite isn't the default one. The style-tag nor the CSS file (if injectAsStyleTag is false) is injected. It works fine if I use the default base config in my vite.config.js.

I had a look at the code and saw that there is a replace of the path for the indexHtmlPath variable which on default replaces the trailing / of the index.html path, but won't replace it properly if the base isn't just /. https://github.com/feat-agency/vite-plugin-webfont-dl/blob/master/src/index.ts#L285

The generateBundle method then won't find the index.html file in the bundle array: https://github.com/feat-agency/vite-plugin-webfont-dl/blob/master/src/index.ts#L312

Any experience with that – shouldn't this be considered?

cewald commented 1 year ago

This is my vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import webfontDownload from 'vite-plugin-webfont-dl'
import svgLoader from 'vite-svg-loader'
import Icons from 'unplugin-icons/vite'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/cv/',
  plugins: [
    vue(),
    vueJsx(),
    svgLoader(),
    Icons({}),
    webfontDownload(
      [
        'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap',
        'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap'
      ],
      {}
    )
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000
  }
})

And this it the index.html production output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/cv/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...</title>
    <script type="module" crossorigin src="/cv/assets/index.27d05be5.js"></script>
    <link rel="stylesheet" href="/cv/assets/index.23033122.css">
  </head>
  <body>
    <div id="app"></div>

  </body>
</html>
0xb4lint commented 1 year ago

Thank @cewald for raising this issue!

I've just created a fix and released 3.4.1-beta.0. Could you please try it and get back to me?

cewald commented 1 year ago

I tested it and it works in dev and production mode, using injectAsStyleTag and without. That was quick – thank you!

0xb4lint commented 1 year ago

Thank you!

I've just published v3.4.1.