Vite alias sass

[mirzaahmedov]

Describe the bug vite aliases not working with sass imports

<style lang="scss">
  @import "@/assets/main.scss";
</style>

vite.config.js

resolve: {
    alias: {
      "@/views": path.resolve(__dirname, "src/views"),
      "@/components": path.resolve(__dirname, "src/components"),
      "@/assets": path.resolve(__dirname, "src/assets"),
      "@/utils": path.resolve(__dirname, "src/utils"),
      "@/hooks": path.resolve(__dirname, "src/hooks"),
      "@/context": path.resolve(__dirname, "src/context"),
    },
  },

Logs

Error while preprocessing /home/mirzaahmedov/Web/Svelte/Learn/src/App.svelte - Can't find stylesheet to import.
  ╷
2 │   @import "@/assets/main.scss";
  │           ^^^^^^^^^^^^^^^^^^^^
  ╵
  src/App.svelte 2:11  root stylesheet
7:42:35 PM [vite] Internal server error: Error while preprocessing /home/mirzaahmedov/Web/Svelte/Learn/src/App.svelte - Can't find stylesheet to import.
  ╷
2 │   @import "@/assets/main.scss";
  │           ^^^^^^^^^^^^^^^^^^^^
  ╵
  src/App.svelte 2:11  root stylesheet
  Plugin: vite-plugin-svelte

To Reproduce github repo

• Please create a small repo that illustrates the problem.
• Reproductions should be small, self-contained, correct examples – http://sscce.org.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that svelte-preprocess is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Information about your project:

• Brave 1.41.96

• archlinux

• svelte-preprocess^4.10.7

• Rollup

[bluwy]

svelte-preprocess doesn't use Vite aliases by default. They are two independent tools so the alias info isn't passed to svelte-preprocess. You need to manually setup aliases for svelte-preprocess like https://github.com/sveltejs/svelte-preprocess/issues/97#issuecomment-551842456. Or you can try vite-plugin-svelte's experimetal.useVitePreprocess option.

[mirzaahmedov]

svelte-preprocess doesn't use Vite aliases by default. They are two independent tools so the alias info isn't passed to svelte-preprocess. You need to manually setup aliases for svelte-preprocess like https://github.com/sveltejs/svelte-preprocess/issues/97#issuecomment-551842456. Or you can try vite-plugin-svelte's experimetal.useVitePreprocess option.

It works! But it is a very bad developer experience. I have to specify my aliases in three different places

1. vite.config.js
2. jsconfig.json (for IDE)
3. svelte-preprocess

Would be great if you could add option to use aliases from jsconfig.js or vite.config.js