Sass-loader中@use规则导入CSS文件的问题解析

问题背景

在使用webpack构建工具链中的sass-loader时，开发者遇到了一个关于@use规则导入CSS文件的兼容性问题。具体表现为：当尝试通过@use规则导入带有.css扩展名的样式文件时，Sass编译器会抛出"找不到样式表"的错误，而移除扩展名后却能正常工作。

问题重现

通过简化测试案例可以清晰地重现该问题：

1. 项目结构包含一个npm包（如@org/pd-styles），其中仅包含CSS文件
2. 在SCSS文件中使用@use "@org/pd-styles/css/pd-styles.css"导入语句
3. 构建时会收到错误提示："Can't find stylesheet to import"

技术分析

预期行为

根据Sass官方文档，@use规则在导入文件时扩展名是可选的。理论上以下两种写法都应正常工作：

• @use "@org/pd-styles/css/pd-styles.css"（带扩展名）
• @use "@org/pd-styles/css/pd-styles"（不带扩展名）

实际行为差异

1. @use规则：

   • 带扩展名的导入方式失败
   • 不带扩展名的导入方式成功

2. @import规则（已弃用）：

   • 无论是否带扩展名都能正常工作

深层原因

这个问题可能源于sass-loader在处理@use规则时的解析逻辑与@import规则存在差异。虽然两者在功能上相似，但实现机制有所不同：

1. 模块系统差异：@use是Sass模块系统的一部分，设计上更严格
2. 路径解析：@use可能没有正确处理带扩展名的CSS文件路径
3. 编译器API：使用sass-embedded时可能存在特定的兼容性问题

解决方案

目前推荐的临时解决方案是：

1. 在使用@use规则导入CSS文件时省略扩展名
2. 或者继续使用@import规则（虽然已弃用，但能正常工作）

对于更彻底的解决方案，需要等待sass-loader或Sass编译器本身的修复。

相关注意事项

开发者还报告了另一个相关问题：当通过@use导入包含相对路径资源（如图片）的CSS文件时，webpack无法正确解析这些资源路径。这是因为：

1. Sass编译会将多个文件合并为一个
2. 合并后相对路径的解析变得复杂
3. 相比之下，通过JavaScript的import语句导入CSS文件时，webpack的资源解析机制能正常工作

最佳实践建议

1. 对于纯CSS文件的导入，优先考虑使用webpack的import语句而非Sass的@use
2. 如果必须使用Sass导入，确保文件路径处理的一致性
3. 关注sass-loader的更新，及时获取问题修复

这个问题已被确认为有效bug，开发者可以关注后续版本更新以获取官方修复。