SCSS排障：绝对导入失效，无法解析public路径资源

问题分析 #

1. 拼写错误：你写的backgorund-image是笔误，正确应为background-image。
2. 路径错误：项目结构中public下是icons文件夹，但你写的是icon，路径层级不匹配。
3. tsconfig的baseUrl不生效：这个配置仅针对TypeScript模块解析，对SCSS中的资源路径解析没有作用。

解决方案 #

方案1：使用绝对路径（推荐） #

public目录是项目的静态资源根目录，构建后所有public下的资源会直接放在部署根路径下，因此可以直接用根相对路径引用：

background-image: url('/icons/category-qualified.svg');

方案2：使用相对路径（不推荐，易维护性差） #

从当前SCSS文件（src/components/MyComponent/MyComponent.module.scss）出发，向上回溯到项目根目录再指向public资源，路径为：

background-image: url('../../../public/icons/category-qualified.svg');

注意：如果后续组件目录结构变动，这个路径需要同步修改。

方案3：配置webpack别名（适合复杂项目） #

如果你的项目使用webpack构建，可以在webpack配置文件中添加别名，简化路径引用：

1. 在webpack.config.js中添加别名配置：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@public': path.resolve(__dirname, 'public')
    }
  }
};

2. 之后在SCSS中即可通过别名引用：

background-image: url('@public/icons/category-qualified.svg');

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