Vite 在 main.ts 中使用别名导入 CSS

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] 无法解析模块导入“@/assets/app.module.css”。 （由/src/main.ts导入）

我做错了什么？

Answer 1

截至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 会导致shared.scss 被导入到每个vue SFC 中。

Answer 2

测试

只是想补充： 对于仍在查看此答案的任何人，您需要添加解决方法，以便它工作，如网站中所述。 我没有添加斜杠'/@/' 这对我有用：

示例：

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

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

Answer 3

@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 导入
• 路径：不需要用/@/ 导入所有内容，而只需@/
• 目标：需要在我的模型中包含 getter 和 setter (get x, set x)

Answer 4

根据those code lines

别名到 fs 目录的路径
键必须以斜杠开头和结尾
'/@foo/': path.resolve(__dirname, 'some-special-dir')

所以试试吧：

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