通过 tsconfig.json 中的 paths 配置路径别名, 在vue文件中无法导入scss文件

[tthzwq]

通过 tsconfig.json 中的 paths 配置路径别名

<!-- App.vue -->

<template>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
@import '~@/style/responsive-form.scss';
</style>

// tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
...
}

通过 source.alias 配置路径别名 能正常导入scss文件

// rsbuild.config.ts

export default defineConfig({
  source: {
    alias: {
      '@': './src',
    },
  },

[SoonIter]

应该没有这种用法，~是用来导入 node_modules 的三方包用的，你可以改为 @import '@/style/a.scss';

https://webpack.js.org/loaders/css-loader/#url

如果你一定要这么用的话可以这么做

// rsbuild.config.ts
export default defineConfig({
  source: {
    alias: {
      '@': './src',
+     '~@': './src',
    },
  },