`outputDir` to `dist/`

[mrleblanc101]

How can I output the sprite in the dist/ folder ? The default outputDir is in the source folder which is very strange, I don't want to commit the sprite, only the originals. So I changed the outputDir to dist/, but it doesn't seem to work. I suspect this run and create the file, but then Vite overwrite the folder ?

[vshepel]

@mrleblanc101 Hi, can you send me your full configuration?

[mrleblanc101]

@vshepel

import { defineConfig } from 'vite'
import vituum from 'vituum'
import twig from '@vituum/vite-plugin-twig'
import postcss from '@vituum/vite-plugin-postcss'
import ViteSvgSpriteWrapper from 'vite-svg-sprite-wrapper';

import customFunctions from './utils/twig.customFunctions.js';

export default defineConfig({
    build: {
        rollupOptions: {
            input: [
                './src/templates/emails/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
                './src/templates/pages/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
                '!./src/templates/pages/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json'
            ]
        }
    },
    plugins: [
        vituum({
            imports: {
                filenamePattern: {
                    '+.css': [],
                    '+.scss': 'src/styles'
                }
            },

        }),
        postcss(),
        twig({
            root: './src/templates',
            dir: './src/templates/pages',
            base: './src/templates',
            functions: customFunctions,
        }),
        ViteSvgSpriteWrapper({
            icons: './src/svg/originals/**/*.svg',
            outputDir: './dist'
        })
    ]
});

[vshepel]

@mrleblanc101 I just added sprite.svg to the .gitignore

You're right, Vite is rewriting your dist folder.

[mrleblanc101]

@vshepel I don't want to add it to add a file in my src/ to .gitignore, I want it to render in the dist folder (also because I symlink the dist/ folder somewhere else). Maybe emit the file using Vite API instead of node directly ?

[mrleblanc101]

I changed buildStart hook to buildEnd hook and everything seems to work now. Do you want me to open a PR ?

[mrleblanc101]

Or maybe not, the generation works. But the file is not served by Vite, even thought my dist/index.html and dist/script/index.js and dist/test.png (from src/public) in the same folder are all served correctly.

[ShawSpring]

built asserts url has changed. vite doc to keep originals, you asserts should be placed in 'public' folder, or just use the imported name

import sprite from '@/assets/sprite.svg';
console.log(sprite);
// url during development is: src/assets/sprite.svg
// url during production is: assets/sprite-FOzG8ty3.svg

    <svg >
      <use xlinkHref={`${sprite}#${iconName}`} />
    </svg>
  )

[vshepel]

@mrleblanc101 Hi

Sorry for the delay, a new version 1.3.2 has been released, and you can do this:

export default defineConfig({
  plugins: [
    ViteSvgSpriteWrapper({
      icons: 'svg/*.svg',
      outputDir: './dist',
    }),
  ],
  build: {
    emptyOutDir: false,
  },
})