@import 문에서 사용하는 외부 CSS 파일의 경로는 다양하게 작성할 수 있습니다. 다음 방법들은 모두 유효합니다.

<style>

@import '../src/assets/main.css';
@import '@/assets/main.css';

</style>

파일의 경로 부분에 @ 속성을 사용할 수 있는 이유는 vite.config.js 파일에 작성된 vite 설정값 때문입니다. resolve 속성에서 alias 속성으로 @ 속성을 정의하고 있습니다. 이때 @ 속성의 값은 src 폴더까지 가리키므로 파일 경로에 @만 입력하면 자동으로 src 경로까지 인식하게 됩니다.

vite.config.js

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})