Sass使用@use引入SCSS文件时提示找不到正确路径如何解决

• 路径写法错误：Sass 本地文件引入不识别开头双斜杠//的路径格式，这种写法是网页端的协议相对路径，本地编译时会直接判定为无效路径，无法定位到目标文件。
• 相对路径层级不匹配：入口文件styles.scss位于src/base/目录下，目标文件chart.scss位于src/about/scss/目录下，两者不在同一层级，直接写about/scss/chart.scss会被Sass判定为从base/目录下查找about文件夹，自然找不到对应文件。
• 未配置全局加载路径：默认情况下Sass只会从入口文件所在目录、执行命令的当前工作目录查找样式文件，没有配置根加载路径时，无法直接从项目src根目录开始寻址文件。

1. 修正文件引入路径
   先把styles.scss里的错误引入规则改掉，有两种写法可选：

• 写相对路径：从当前base目录往上一级回到src根目录，再寻址目标文件，写法如下：

  @use "../about/scss/chart.scss";
  

• 配置全局加载路径后写根路径（更推荐，后续引入多文件时不用反复计算相对层级）：先把引入路径改成不带双斜杠的形式

  @use "about/scss/chart.scss";
  

2. 调整编译命令
   执行编译命令前先通过终端cd到src目录下，再运行添加了加载路径参数的编译命令：

sass base/styles.scss:build/css/main.css --watch --style=compressed --no-source-map --load-path=./

其中--load-path=./参数是把当前src目录设为Sass的样式查找根目录，之后所有@use/@forward引入的路径都可以直接从src目录下开始写，不用处理复杂的相对层级。
3. 批量引入多组件样式的优化方案
如果不想逐个手写每个组件的引入规则，可以按Sass的局部文件规则优化：

• 在每个业务模块的scss目录下新建_index.scss文件（文件名前加下划线代表这是局部片段文件，不会被单独编译为独立css文件），用@forward规则统一导出当前目录下的所有组件样式，比如about/scss/_index.scss内容如下：

  @forward "chart";
  // 后续新增组件样式，只需要在当前文件追加对应@forward规则即可
  

• 在入口styles.scss里只需要引入各模块的index文件即可，不用逐个写组件路径：

  @use "about/scss";
  @use "app/scss";
  

配置完成后保存任意scss文件，--watch参数就会自动触发编译，最终所有样式会被合并打包到build/css/main.css单个文件中。

注意：你贴的目录结构里chart.scss末尾的多余斜杠如果是真实命名要删掉，.scss是文件不是文件夹，多了斜杠也会导致寻址失败。

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