How to configure Vite to resolve nested SFC CSS url's

user_16547166 0
Viewed 597

I use VUE 3 with Vite. I want to set correct path config for styles in .vue SFC files.

my-component.vue:

<template>...</template>
<style scoped>
 .my-ele{
   background-image: url("@/background.png");
 }
</style>

In vite.config.js I have,

{
base: process.env.APP_ENV === 'development'? '/': '/dist/',
build: {    
   outDir: path.resolve(__dirname, './../dist'),   
   manifest: true,   
   target: 'es2018',   
   rollupOptions: {
       input: '/main.js'
   }
  },
  resolve: {
   alias: {
       vue: 'vue/dist/vue.esm-bundler.js',
       '@':'/E:/www/Project-x/assets'
     }
    }
}

When I run Vite and inspect the code I see the path

background-image: url("/@fs/E:/www/Project-x/asset/background.png");

instead of the path with Vite server which needs to be:

background-image: url("http://localhost:3000/@fs/E:/www/Project-x/asset/background.png");

How can I configure the app?

vite vuejs3 vue.js
1 Answers
// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'asset')
    }
  }
})
user_197720400
Related