Alias path resolving possible?

[rottmann]

With @rollup/plugin-alias you can replace paths, but this will not affect import paths within style.

e.g. you have a main.scss file in the root dir and you want to import it into the component

/root/components/some-component/some-componen.svelte

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

with alias usage it could look like this:

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

[LukasHechenberger]

The resolution of @import statements is handled by node-sass, so the plugin cannot work in this case. Why not just add the root directory as an includePath?

...
sass({
  includePaths: ['root']
})

This way you don't even need the ~ and can instead write @import 'main.scss'...

[rottmann]

Thanks, that would be ok too.

[pavelsokolov21]

Hi both! I have another issue. I've added this configuration to my rollup config:

And I see the following issue when I imported my file:

But I don't see any errors in the console:

[pavelsokolov21]

The quick answer: I've just added the following code to the svelte.config.js and the error is gone away

[LukasHechenberger]

I think if you include "src/styles" you can @import it as "variables.scss". Otherwise use "src" as your include path. That's not specific to this module 😉