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 导入）

我究竟做错了什么？

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 那些代码行

别名为 fs 目录的路径

密钥必须以斜杠开头和结尾

'/@foo/': path.resolve(__dirname, 'some-special-dir')

所以试试看：

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

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

从 vite@2.1.5 ，我可以通过以下方式解决 @ 和 ~ 别名的分辨率：

• 添加 vite 别名

• 修改 vite.config.js 如 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";

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

原文由 Remigius Stalder 发布，翻译遵循 CC BY-SA 4.0 许可协议