Hi @everytone,
I need to bundle my react app into js file which will will have reference to all other assets. This index file is added to an html page that is generated by .net application. So i cant generate index html by Vite. Build itself is working fine, but i'm loosing my css styles as during build Vite generates separate css file for styles. And i can't include <link> tag to generated stylesheet into my index.html.
Is there any way to have my main bundle file to keep reference to css file and insert link tag into index.html?
#Building react app to js file to be used as part .net application
urban walrus
my vite.config.js is pretty simple
export default defineConfig({
plugins: [react()],
mode: 'production',
css: {
postcss: 'sass',
},
build: {
emptyOutDir: true,
rollupOptions: {
input: './src/main.jsx',
}
}
})
autumn orbit
It is possible that this plugin has an implementation defect, but it may still inspire you.
urban walrus
as i understand this plugin will put all styles inside <style> tag, its is not exactly what i want. Maybe there is an option to generate <link> tags with correct src to css assets from bundle?
urban walrus
i have an other project that is using vite, and in bundle with disabled minification i can see __vitePreload that preloads all css assets and links them to html. configs in terms of build are identical
how can i enable this vitePreload by default?
rapid zealot
Hi @urban walrus , a simple way to achieve this is to follow the backend integration guide that is available here : https://vitejs.dev/guide/backend-integration.html. Using this method, i was able to run a vue js bundle on a website that contains old stuff like PHP, Classic ASP... even in dev mode through the devserver 😉 !
You simply have to add the "manifest: true" option in your configuration and handle your script and style tags generation using the generated manifest.json file. I think it will not be hard to do that in a razor page.