Vite import CSS with alias in main.ts

Question

我正在尝试用 vite 替换 vue-cli。我有一个 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] Failed to resolve module import "@/assets/app.module.css". (imported by /src/main.ts)

我做错了什么？

Answer 1

根据those code lines

alias a path to a fs directory
the key must start and end with a slash
'/@foo/': path.resolve(__dirname, 'some-special-dir')

所以尝试一下：

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

Answer 2

@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：我的模型中需要 gettersand setters (get x, set x)

Answer 3

测试

只想补充：对于仍在查看此答案的任何人，您需要添加 resolve 才能正常工作，如网站中所述。我没有添加斜线 '/@/' 这对我有用：

示例：

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

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

Answer 4

从 vite@2.1.5 开始，我可以通过以下方式解决 @ 和 ~ 别名的问题：

添加vite-aliases
按照readme.md
中的描述修改vite.config.js

使用~别名为引用的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";

显然，如果您需要从 node_modules 的子目录中导入更多的 scss 文件，则需要为 aliases 添加更多的别名。省略波浪号别名以导入 bootstrap.scss 是可行的，但它不会被我的 IDE 识别。添加 css.preprocessorOptions.scss.additionalData 会导致在每个 vue SFC 中导入 shared.scss。

Vite import CSS with alias in main.ts

Vite import CSS with alias in main.ts

typescript

vue.js

vuejs3

vite