Svelte VSCode 无法识别用于可变分辨率的 scss prependData答案

【问题标题】：Svelte VSCode doesn't recognize scss prependData for variable resolutionSvelte VSCode 无法识别用于可变分辨率的 scss prependData
【发布时间】：2022-09-28 03:32:55
【问题描述】：

我正在使用带有 Rollup 的 Svelte，并试图让 scss 能够导入别名或使用全局导入。我的应用程序编译得很好。但问题是，VSCode（或 svelte 扩展，我不知道）不识别别名，并说我的文件有错误。我仍然可以运行我的应用程序，但每个文件看起来都是红色的。

尝试 1

我尝试制作别名并通过它导入

// 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>

尝试 2

尝试将导入预先添加到每个文件

// 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>

两种尝试在编译时都有效，但 VSCode 一直说有错误。如何阻止 VSCode 不理解？我宁愿坚持尝试 1，但我可以通过任何方式解决这个问题。

标签： sass svelte rollupjs svelte-preprocess

【解决方案1】：

我正在寻找相同问题的解决方案，并在 Svelte reddit https://www.reddit.com/r/sveltejs/comments/pmham1/sveltekit_how_to_set_up_global_scss_accessible_to/ 上看到了这篇文章

来自顶级答案的配置副本：

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

这似乎已经为我解决了。

【讨论】：