如何让WebStorm解析Dart项目中使用`@use "package:..."`语法导入的外部Dart包SCSS文件？

我之前也遇到过一模一样的问题！折腾了好一阵终于找到几个靠谱的解决办法，既能保留package:语法的构建支持，又能让WebStorm正常识别路径、提供自动补全、跳转定义这些功能：

方法一：给WebStorm的Sass配置添加包含路径 #

这是最直接的方案，核心是告诉WebStorm你的Dart包中SCSS文件所在的位置：

• 打开WebStorm的Settings/Preferences（Windows/Linux按Ctrl+Alt+S，Mac按Cmd+,）
• 找到Languages & Frameworks > Style Sheets > Sass选项
• 在Additional include paths区域，点击加号，添加你的my_package中SCSS根目录的实际路径。如果是通过pub get下载的托管包，路径一般是pub缓存目录下的对应包位置，比如Mac/Linux下是~/.pub-cache/hosted/pub.dev/my_package-x.x.x/styles，Windows下是%APPDATA%\Pub\Cache\hosted\pub.dev\my_package-x.x.x\styles
• 👉 优化技巧：为了避免绝对路径在不同机器/包版本更新后失效，可以用WebStorm的路径变量：
  1. 先进入Settings/Preferences > Appearance & Behavior > Path Variables
  2. 添加一个变量（比如DART_PUB_CACHE），值设为你的pub缓存目录（Windows：%APPDATA%\Pub\Cache，Mac/Linux：~/.pub-cache）
  3. 回到Sass配置的包含路径，用$DART_PUB_CACHE$/hosted/pub.dev/my_package-x.x.x/styles这种格式填写，换机器只要变量值正确就能直接用

方法二：针对本地开发的Dart包适配 #

如果my_package是你自己本地开发的、用路径依赖的包（在主项目pubspec.yaml里写的my_package: path: ../my_package），可以用更灵活的相对路径配置：

• 同样进入Sass的Additional include paths设置
• 添加相对路径../my_package/styles（根据你本地包的实际相对位置调整）
• 这样WebStorm能直接识别到包内的SCSS文件，同时构建时package:语法也能正常工作

方法三：共享WebStorm配置（团队开发场景） #

如果是团队协作，可以把WebStorm的Sass配置文件（.idea/sass.xml）提交到版本控制里，这样团队成员拉取代码后不用重复配置。如果用了路径变量，记得提醒团队成员在自己的IDE里配置好对应的变量值即可。

最佳实践提醒 #

• 尽量避免用相对路径直接替换package:语法，不然会破坏构建工具的解析逻辑
• 软链接的方案确实不适合跨平台和版本控制，优先用IDE的配置方案替代
• 如果是pub托管的包，版本更新后记得同步更新Sass包含路径里的包版本号

内容来源于stack exchange