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

已测试

只是想添加：对于仍在查看此答案的任何人，您需要添加解析才能正常工作，如网站中所述。我没有添加斜杠“/@/”这对我有用：

例子：

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

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

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";

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

Answer 3

根据这些代码行

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

所以尝试一下：

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