problem with importing Sass files

[saadeghi]

When I import the sass file to SvelteKit, https://github.com/ubeac/svelte/blob/merge-doc-site/src/routes/__layout.svelte

import '../scss/index.scss'

There's comes and issue with Bootstrap

Error: Can't find stylesheet to import.
  ╷
1 │ @import "~bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@tabler/core/src/scss/_config.scss 1:9  @import
  node_modules/@tabler/core/src/scss/_core.scss 1:9    @import
  src/scss/index.scss 1:9                              root stylesheet

I expect this to work because this was the preprocess config of SvelteKit:
https://github.com/ubeac/svelte/blob/merge-doc-site/svelte.config.js

preprocess({
  scss: {
    importer: (url, prev) => {
      if (url[0] === '~') {
        url = path.resolve('node_modules', url.substr(1))
      }
      return { file: url }
    },
  },
}),

Any ideas about this error? @TheHadiAhmadi @pournasserian

[TheHadiAhmadi]

You can add an alias for '~bootstrap' which resolves to 'bootstrap' in svelte.config.js > kit.vite.resolve.alias

[TheHadiAhmadi]

@saadeghi this commit should fix the problem

I expect this to work because this was the preprocess config of SvelteKit: https://github.com/ubeac/svelte/blob/merge-doc-site/svelte.config.js

preprocess({
scss: {
importer: (url, prev) => {
if (url[0] === '~') {
url = path.resolve('node_modules', url.substr(1))
}
return { file: url }
},
},
}),

this code only handles imports inside