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

我正在尝试用vite替换vue cli。我有一个vite.config.js，因此可以使用alias进行导入：

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

我做错了什么？

根据

别名fs目录的路径
键必须以斜杠开始和结束

'/@foo/'：path.resolve（uu dirname，'some special dir'）

因此，请尝试：

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

---

@Boussadjra Brahim回答了最初的问题，我只想为那些在VSCode和vite设置方面有问题的人补充一些见解

{
    "compilerOptions": {
        "baseUrl": ".",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "esnext"
    },
    "include": [
        "src/**/*.ts",
    ]
}

• esModuleInterop：我需要它能够

  从“seedrandom”导入seedrandom；

• moduleResolution:从

  vue导入时需要

• 路径：不需要使用

  /@/

  导入所有内容，只需导入

  @/

• 目标：在我的模型中需要有gettersandsetter（

  get x

  ，

  set x

  ）

---

测试

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

例如：

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

---

自

vite@2.1.5

我可以通过以下方式解决

@

和

~

别名的解析：

• 加

• 修改

  vite.config.js

  ，如

  readme.md

• 使用

  ~

  别名为引用的scss文件添加别名，如下所示：

  aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })
  

  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";'
        }
      }
    }
  })
  

现在，

vite.config.js

如下所示：

aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })

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文件：

aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })

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";'
      }
    }
  }
})

在

src/main.ts

中：

import '@scss/main.scss'

在

src/scss/main.scss

中：

@import "~bootstrap/scss/bootstrap";

---

显然，如果您需要从

node\u modules

的子目录中导入更多的scss文件，那么您需要向

别名添加更多的别名。忽略用于导入
bootstrap.scss
的波浪线别名，但我的IDE无法识别它。添加
css.preprocessions.scss.additionalData
导致在每个vue SFC中导入
shared.scs
。
是的，似乎是这样。我现在可以使用@/assets/app.css导入css，但我现在似乎需要导入带有/@/components/或VSCode投诉的TS和.vue文件。你的意思是必须将每个相对路径更改为
@/
绝对路径吗？我认为这是正确的不是vite的问题，而是VSCode的问题。毕竟我需要添加一个最小的tsconfig.json，所以我很高兴现在vite 2也是如此