Disable asset handling in Vite

Question

I have a PHP project (WordPress theme) with Vite and PostCSS to bundle my JS and CSS files.

The output directory is build and everything worked, but as soon as I import fonts or images in my CSS, Vite copies them into the build folder and changes the paths in the source.

File structure:

styles
 |- tailwind.css
 |- fonts
    |- fa-brands-400.eot
    |- fa-brands-400.woff
    |- fa-brands-400.woff2
    |- fa-brands-400.svg
    |- fa-brands-400.ttf
js
 |- index.js
vite.config.js
...

In my tailwind.css, I'm importing the font:

@font-face{
    font-family:"Font Awesome 5 Brands";
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url(../styles/fonts/font_awesome/fa-brands-400.eot);
    src:url(../styles/fonts/font_awesome/fa-brands-400.eot?#iefix) format("embedded-opentype"),url( ../styles/fonts/font_awesome/fa-brands-400.woff2) format("woff2"),url(../styles/fonts/font_awesome/fa-brands-400.woff) format("woff"),url(../styles/fonts/font_awesome/fa-brands-400.ttf) format("truetype"),url(../styles/fonts/font_awesome/fa-brands-400 .svg#fontawesome) format("svg")
}

The problem, Vite copied the imported font files to my build folder and my font import now looks like this (in build/tailwind.css:

@font-face{
    font-family:"Font Awesome 5 Brands";
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url(/fa-brands-400.eot);
    src:url(/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(/fa-brands-400.woff2) format("woff2"),url(/fa-brands-400.woff) format("woff"),url(/fa-brands-400.ttf) format("truetype"),url(/fa-brands-400.svg#fontawesome) format("svg")
}

Is there a way to disable this? I just want Vite to bundle my JS and CSS, but don't include my assets.

My vite.config.js looks like this:

import postcssImport from "postcss-import"
import tailwindcssNesting from "tailwindcss/nesting"
import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"
import postcssScss from "postcss-scss"
import { defineConfig } from "vite"

export default defineConfig({
  build: {
    outDir: "build",
    cssCodeSplit: true,
    emptyOutDir: true,
    minify: false,
    assetsDir: "", 
    rollupOptions: {
      input: {
        index: "js/index.js",
        tailwind: "styles/tailwind.css",
      },  
      output: {
        entryFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
      },  
    },  
  },  
  css: {
    postcss: {
      syntax: postcssScss,
      plugins: [postcssImport, tailwindcssNesting, tailwindcss, autoprefixer],
    },  
  },  
  clearScreen: true,
  publicDir: false, 
})

Answer 1

I am facing a similar issue with a library build. I want to have an image relative to my css file, but default it is placed at the root and the reference in the css file is also to the root (just like in your problem). I did not find a perfect solution, but I was able to place the image in the same folder as the css file, where the css file also references the image in the same folder. I used the rollup config option output.assetFileNames for this. You can pass your own function and in that function you can add the complete path to the folder where you want to add the asset.

assetFileNames: (assetInfo: PreRenderedAsset): string => {
    if (assetInfo.type === 'asset') {
        return 'styles/fonts/[name][extname]';
    }
    else { 
        return '[name][extname]';
    }
},

This will place the fonts in the build/styles/font folder. The references in the css will also be in this folder.

There is one caveat: The references will begin with '/', so they will be from the root of the domain. I have not found a solution for this.