Vite在main.ts中导入带有别名的CSS

问题描述

我正在尝试用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导入）

我在做什么错了？

解决方法

根据those code lines

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

所以尝试一下：

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

,

@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）中使用getter和setter方法

,

已测试

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

示例：

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

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

,

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

• 添加vite-aliases

• 按照 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 会导致在每个 vue SFC 中导入 shared.scss。