Vite import CSS с псевдонимом в main.ts

Question

Пытаюсь заменить vue-cli на vite. У меня есть vite.config.js, поэтому я могу использовать псевдоним для импорта:

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

Затем в моем main.ts я пытаюсь импортировать свой файл css (я пробовал его с или без .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');

Но я получаю такую ​​ошибку:

[vite] Не удалось разрешить импорт модуля "@/assets/app.module.css". (импортировано /src/main.ts)

Что я делаю неправильно?

Answer 1

Согласно этим строкам кода

псевдоним путь к каталогу fs,
ключ должен начинаться и заканчиваться косой чертой
'/@foo/': path.resolve(__dirname, 'some-special-dir')

так что попробуйте:

 '/@/': require('path').resolve(__dirname, 'src'),

Answer 2

Проверено

просто хотел добавить: для тех, кто все еще смотрит этот ответ, вам нужно добавить разрешение, чтобы он работал, как описано на веб-сайте. Я не добавлял косую черту '/ @ /' У меня работает:

пример:

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

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

Answer 3

По состоянию на vite@2.1.5 Я мог решить разрешение @ и псевдонимы следующим образом:

• добавить vite-псевдонимы

• изменить, как описано в readme.md

• добавьте псевдоним для указанного файла scss, используя ~ псевдоним следующим образом:

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

сейчас vite.config.js выглядит следующим образом:

      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";'
      }
    }
  }
})

это позволило мне импортировать файлы scss следующим образом:

в src/main.ts:

      import '@scss/main.scss'

в src/scss/main.scss:

      @import "~bootstrap/scss/bootstrap";

Очевидно, если вам нужно импортировать больше файлов scss из подкаталога node_modules, вам нужно добавить еще несколько псевдонимов к aliases. Оставляя псевдоним тильды для импорта bootstrap.scssработал, но моя IDE не распознала его. Добавление css.preprocessorOptions.scss.additionalData вызывает shared.scss для импорта в каждый vue SFC.

Answer 4

@Boussadjra Brahim ответил на исходный вопрос, я просто хочу добавить некоторые идеи для тех, у кого есть проблемы с VSCode и настройкой vite. Вот мой минималистичный tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "esnext"
    },
    "include": [
        "src/**/*.ts",
    ]
}

• esModuleInterop: мне нужно, чтобы import seedrandom from 'seedrandom';
• moduleResolution: нужен для импорта из vue
• путь: не нужно импортировать все с помощью /@/ но только @/
• target: требовалось, чтобы в моих моделях были геттеры и сеттеры (get x, set x)