VSCode中Svelte组件用$lib别名导入SCSS报错的解决方法

以下几种方法可以解决或屏蔽这个错误：

• 配置Svelte扩展的路径解析
  在项目根目录创建或修改svelte.config.js，添加$lib的别名映射，让VSCode的Svelte扩展能识别这个路径：

  import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
  import path from 'path';
  
  export default {
    preprocess: vitePreprocess(),
    resolve: {
      alias: {
        $lib: path.resolve('./src/lib')
      }
    }
  };
  

  保存后重启VSCode或Svelte扩展，扩展就能正确解析$lib路径了。

• 配置SCSS的路径解析
  如果是SCSS的lint工具报错，可以给SCSS配置别名：

  1. 安装依赖：

     npm install stylelint-import-resolver-alias --save-dev
     

  2. 在项目根目录的.stylelintrc文件中添加解析配置：

     {
       "settings": {
         "import/resolver": {
           "alias": {
             "map": [["$lib", "./src/lib"]],
             "extensions": [".scss", ".sass"]
           }
         }
       }
     }
     

• 临时屏蔽单个错误
  如果不想全局配置，也可以在报错的导入语句上方添加注释，屏蔽该条错误：

  /* stylelint-disable-next-line scss/at-import-no-unresolved */
  @import '$lib/styles/mixins';
  

内容的提问来源于stack exchange，提问作者farincz