Custom Variables with Vite

[turbobuilt]

Hello,

Back again with another small fix. I had to do a couple things to get it working with vite. First, I had to add these two exports with custom variables in order to be able to import the package.

"exports": {
    "./src/wave-ui/scss/_variables": "./src/wave-ui/scss/_variables",
    "./src/wave-ui": "./src/wave-ui/index.js",
    ...
}

Secondly, I had to create a main.scss file in the src directory of my Vite app that contained @import 'wave-ui/src/wave-ui/scss/_variables'; at the top.

Lastly, I had to put this in my vite.config.ts file:

export default defineConfig({
    ...
    css: {
        preprocessorOptions: {
            scss: { 
                additionalData: `@import "./src/main.scss";` 
            },
        },
    },
}

[antoniandre]

Hi @turbobuilt,

You should only need this if you want to access the Wave UI SCSS variables for override, as explained here: https://antoniandre.github.io/wave-ui/customization#modify-your-config in the third point (there's also the Vite implementation :) ).

If you use Wave UI in the standard way, you don't need it, you can check this documentation as an example which uses Vite and Wave UI: https://github.com/antoniandre/simple-syntax-highlighter

Hope it helps, I'm closing the issue now, but please reopen if not solved! :)