Vite import CSS with alias in main.ts

Question

I'm trying to replace vue-cli with vite. I have a vite.config.js so I can use alias for imports:

export default {
    alias: {
        '@': require('path').resolve(__dirname, 'src'),
    },
};

Then in my main.ts I try to import my css file (I tried it with or without the .module:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

But I get this error:

[vite] Failed to resolve module import "@/assets/app.module.css". (imported by /src/main.ts)

What am I doing wrong?

Answer 1

Tested

just wanted to add: For anyone still looking at this answer you need to add resolve so it work, as documented in the website. I didn't added the slashes '/@/' This works for me:

example:

resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src')
    }
  },

https://vitejs.dev/config/#resolve-alias

Answer 2

As of [email protected] I could solve resolution of @ and ~ aliases in the following way:

• add vite-aliases

• modify vite.config.js as described in the readme.md

• add an alias for the referenced scss file using the ~ alias as follows:

  aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })
  

now vite.config.js looks as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { getAliases } from 'vite-aliases'

const aliases = getAliases();

// add aliases to import scss from node_modules here

aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: aliases
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@scss/shared.scss";'
      }
    }
  }
})

this allowed me to import scss files as follows:

in src/main.ts:

import '@scss/main.scss'

in src/scss/main.scss:

@import "~bootstrap/scss/bootstrap";

Obviously, if you need to import more scss files from a subdirectory of node_modules, sou need to add some more aliases to aliases. Leaving out the tilde alias for importing bootstrap.scss worked, but it would not be recognized by my IDE. Adding the css.preprocessorOptions.scss.additionalData causes the shared.scss to be imported in each vue SFC.