Svelte+Rollup开发中VSCode无法识别SCSS别名与prependData问题

方案1：修复SCSS别名识别问题 #

jsconfig.json的别名仅对JS/TS生效，VSCode的Svelte插件和SCSS语言服务不会读取这个配置，需要单独设置SCSS的路径映射：

1. 在项目根目录创建.vscode/settings.json，添加SCSS路径配置：

   {
     "scss.sassPaths": ["src"],
     "sass.includePaths": ["src"],
     "files.associations": {
       "*.scss": "scss"
     }
   }
   

2. 确保Rollup的SCSS预处理配置同步路径，以svelte-preprocess为例：

   import sveltePreprocess from 'svelte-preprocess';
   
   export default {
     plugins: [
       svelte({
         preprocess: sveltePreprocess({
           scss: {
             includePaths: ['src'], // 和VSCode配置保持一致
           },
         }),
       }),
     ],
   };
   

3. 组件内导入SCSS文件时，直接使用基于src的路径。比如变量文件在src/styles/_variables.scss，就写：

   @import 'styles/_variables.scss';
   

   这样VSCode就能正确识别路径，不会再标红“找不到样式表”。

方案2：修复全局SCSS变量的识别问题 #

Rollup的prependData是编译时注入逻辑，但VSCode的SCSS语言服务不知道这个配置，需要手动告知全局变量的来源：

1. 在.vscode/settings.json里添加全局导入声明：

   {
     "scss.globals": [
       "@import 'src/styles/_variables.scss';"
     ]
   }
   

2. 确认Rollup的prependData配置正确：

   preprocess: sveltePreprocess({
     scss: {
       prependData: `@import 'src/styles/_variables.scss';`,
       includePaths: ['src'],
     },
   }),
   

3. 重启Svelte语言服务：按Ctrl+Shift+P，输入Svelte: Restart Language Server，变量未定义的标红即可消除。

额外注意点 #

• 确保安装了最新版的「Svelte for VS Code」和「SCSS IntelliSense」插件
• 组件的style标签必须加上lang="scss"，比如：

  <style lang="scss">
    .box {
      background: $primary-bg;
    }
  </style>
  

• 如果使用TypeScript，将jsconfig.json替换为tsconfig.json，配置compilerOptions.paths，同时同步.vscode/settings.json里的SCSS路径

内容的提问来源于stack exchange，提问作者Gabriel d'Agosto