2

I'm using Svelte with Rollup, and trying to get scss to work importing an alias, or with global import. My app compiles just fine. But the problem is, VSCode (or svelte extension, i don't know) doesn't recognize aliases, and says my file has errors. I can still run my app, but every single file looks red.

Attempt 1

I tried making an alias and importing via it

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
      "paths": {
        "src/*": [
          "src/*"
        ],
      }
  }
}

// App.svelte

<style lang="scss">
  @import "src/style/theme.scss"; // Error: Can't find stylesheet to import
</style>

Attempt 2

Tried prepending the import to every single file

// rollup.config.js

const config = {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        scss: {
          prependData: `@import './src/style/theme.scss';`,
          includePaths: [path.resolve(__dirname)],
        },
      }),
  ]
}

// src/style/theme.scss

$black: #000000;

// App.svelte

<style lang='scss'>
  color: $black // Error: undefined variable
</style>

Both attempts work when compiling, but VSCode keeps saying there's errors. How do I stop VSCode from not understanding? I'd rather stick to Attempt 1, but any way I can solve this I'm fine.

Gabriel d'Agosto
  • 416
  • 3
  • 12

1 Answers1

1

I was looking for a solution to the same problem and came across this post on the Svelte reddit https://www.reddit.com/r/sveltejs/comments/pmham1/sveltekit_how_to_set_up_global_scss_accessible_to/

Copy of the config from the top answer on that:

import preprocess from 'svelte-preprocess'
import path, { dirname } from 'path'
import { fileURLToPath } from 'url'
import adapter from '@sveltejs/adapter-node'

const filePath = dirname(fileURLToPath(import.meta.url))
const sassPath = `${filePath}/src/lib/style/`

const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        scss: {
            prependData: `@import '${sassPath}_global-imports.scss';`
        }
    }),

   ....
}

export default config

This seems to have solved it for me.

PinkFluffy1Corn
  • 11
  • 2