Css file url

[luclucluc]

Hi Arno, Thanks again for you work on this kit! I come back a few months later on the same problem. After Build I still have a broken link in the CSS file.

On the multi-page-kit without any modification I can find this in the built css: @font-face{font-family:Compagnon;font-style:bold;src:url(/dist/assets/Compagnon-Bold-60bba4d6.woff2)} As you can see on this online version the font is not linked: https://dev.lucborho.com/kirby-vite-multi-page-kit-main/public/

As css file and the font are in the same folder, when I do manually the following change, it is working: @font-face{font-family:Compagnon;font-style:bold;src:url(./Compagnon-Bold-60bba4d6.woff2)}

Do you have any idea what could be causing this?

[arnoson]

Hi Luc, it seems to be the same problem as last time: this kit is not meant to be run in a subfolder (like lucborho.com/kirby-vite-multi-page-kit-main/public/). The public folder should be the root folder. For most hosting providers you can point a subdomain to a specific folder, like your-dev-website.lucborho.com points to something like sites/your-dev-website. The URLs generated by vite are absolute, this means running this website in a subfolder would require to change vite's public base path. But you shouldn't do this with this kit, because if you run it inside a subfolder, your non-public files won't be protected anymore!

[luclucluc]

Ok I get it this time. I created a new subdomain with the correct folder structure and it works : http://vite.lucborho.com

One last question, could you advice an approach to implement an autoprefixer? It seems that the folder structure doesn't allow regular solutions.

Thanks a lot for your time

[arnoson]

You're welcome :) Do you mean a CSS autoprefixer? You can use postcss's autoprefixer like this:

Install it

npm install autoprefixer -D

and add it to your vite.config.js

import autoprefixer from 'autoprefixer';
// ...

export default ({ mode }) => ({
  // ...
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  },  
)}

[luclucluc]

Yes a css Autoprefixer. It works perfectly. Thanks again!