Custom CSS Template Fails to Generate Correct Fonts and CSS Files on Build

[bhrlu]

We've encountered a problem where custom CSS templates function correctly during development, but fail to generate the correct fonts and CSS files when building the project.

[atlowChemi]

Could you share some kind of reproducible example?

[jayswo]

Build Mode does not generate CSS and Font Files when writeFiles is set to false

I encountered a similar problem. I am using Build Mode for deployments, but it fails to generate CSS and font files. I suspect the issue is related to the writeFiles configuration being set to false.

Steps to Reproduce:

• using Vite 5.1.1
• using vite-svg-2-webfont 3.3.0
• Set up the project with Build Mode.
• Run the build process without running the serve mode before.

Plugin Options

 viteSvgToWebfont({ 
      context: path.resolve(directoryName, 'assets/icons/svg'),
      dest: path.resolve(directoryName, 'public/static/icons/font'),
      cssDest: path.resolve(directoryName, 'assets/css/style/icons.scss'),
      htmlDest: path.resolve(directoryName, 'public/static/icons.html'),
      cssTemplate: path.resolve(directoryName, 'assets/icons/icons-css-template.hbs'),
      htmlTemplate: path.resolve(directoryName, 'assets/icons/icons-html-template.hbs'),
      cssFontsUrl: path.resolve('/static/icons/font'),
      fontName: 'iconfont',
      baseSelector: '.icon',
      types: ['woff2'],
      generateFiles: true,
      normalize: true,
      inline: false,
  } ),

Behavior: No CSS and font files are generated.

Code: if (isBuild) { processedOptions.writeFiles = false; }

WriteFiles is set to false on Build. Changing this to true during Build would save my problem. Can we make this configurable via an option?

[johannarepp]

++

[atlowChemi]

Hi @jayswo thank you for the detailed message!

This fact we always set writeFiles to false during build is intentional. (I am willing to change this, I am trying to figure out why we need to 🙂) This is because during build we emit the files as part of the output bundle, and hence writing the to dest feels redundant to me.

Could you share more on your use case, why you want/need to emit these files during build?

Regarding the process described please see:

https://github.com/atlowChemi/vite-svg-2-webfont/blob/99142cd938c5c7f81af7442ae24da85aade8768e/src/index.ts#L118-L141

This calls await generate(), which sets a value to generatedFonts (without writing the fonts to fs), and then iterated over the files we want to emit, and sets the fileRefs. This fileRefs value is then used during the transform hook to ensure the files are added to the outputed bundle: https://github.com/atlowChemi/vite-svg-2-webfont/blob/99142cd938c5c7f81af7442ae24da85aade8768e/src/index.ts#L106-L111

[SimonSimmler]

++

[jayswo]

Hi @atlowChemi, sorry for the late response.

I think our setup is a little bit different to maybe other vite projects - we are using Symfony with Vite. We need to import the Iconfont CSS via CSS Stylesheets and not via JavaScript, and we would like to preload the Font Files.

For our Deployment, we just execute the Vite Build Prozess, without running the Debug Task, so we need the Files to be written during Build.

We would be very happy, if you could add the option to configure writeFiles to true in Build Mode :)

[atlowChemi]

Hey @jayswo, no appologies needed 🙂

I have opened a PR #35 which I assume would help out with your use case. I'll wait a few days for your response regarding the suggested change, so please let me know if it works for you.

[jayswo]

Hi @atlowChemi :) I testet the PR #35 and it works perfect - thank you so much ! :)

[atlowChemi]

@jayswo released in v3.4.0 🙂