npm run production and moving assets

[freshface]

Hi Rob

My coworker is using tailwind and defined a custom component like this:

plugin(function({ addComponents, theme }) {
     const components = {
       '.swiper-button-prev': {
         left: '0px !important',
         backgroundImage: 'url(../svg/arrow_right.svg)',
         backgroundRepeat: 'no-repeat',
         backgroundSize: '30% 30%',
         backgroundPosition: 'center',
         backgroundColor: '#221B29',
         width: '50px !important',
         height: '50px !important',
         transform: 'rotate(180deg)'
       },
       '.swiper-button-prev::after, .swiper-button-next::after': {
         display: 'none'
       },
       '.swiper-button-next': {
         right: '0px !important',
         backgroundImage: 'url(../svg/arrow_right.svg)',
         backgroundRepeat: 'no-repeat',
         backgroundSize: '30% 30%',
         backgroundPosition: 'center',
         backgroundColor: '#221B29',
         width: '50px !important',
         height: '50px !important'
       }
     }
     addComponents(components)
   }),

This all works and pointing to the correct assets when npm run watchis ran.
But when you do an npm run build the js and css files get compiled to the public/build folder and the frontend is loading the production .js and .css files.

But at this point any reference to an asset (image/svg) in the js of css file like this: backgroundImage: 'url(../svg/arrow_right.svg)', is missing.

Because those assets are not moved when doing npm run build.

I fixed this by adding this to the vite.config.js file

import laravel from 'laravel-vite-plugin'
import { defineConfig, loadEnv } from 'vite'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import path from 'path'

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        plugins: [
            viteStaticCopy({
                targets: [
                  {
                    src: path.resolve(__dirname, './resources/svg') + '/[!.]*',
                    dest: './svg',
                  },
                  {
                    src: path.resolve(__dirname, './resources/images') + '/[!.]*',
                    dest: './images',
                  },
                ],
              }),
            laravel([
                'resources/css/site.css',
                'resources/js/site.js',
            ])
        ],
        server: {
            open: env.APP_URL
        }
    }
});

I hope this all makes sense :)

Ps, when using the statamic asset/svg tag there is no issue because it looks in the /resources folder for its asset and does it's magic.

[robdekort]

Hey yeah, it makes sense. Make sure you reference assets like the following example in your JS/CSS files. This way Vite to updates the URL and copies the assets over to the build folder:

plugin(function({ addComponents, theme }) {
    const components = {
        '.test': {
            backgroundImage: 'url(/public/path/to/file.svg)',
        },
    }
    addComponents(components)
})

You can also reference the resources folder like this: /resources/svg/file.svg.

The config changes aren't needed this way. Hope it helps!

[robdekort]

I've updated the docs: https://peak.1902.studio/other/reference-assets-in-css.html