Sass/dart-sass 项目中 @import 规则解析异常问题分析

在 Sass/dart-sass 项目的 1.79.5 版本升级后，部分用户在使用 CSS 文件中的 @import 规则时遇到了类型转换异常问题。这个错误表现为当尝试解析包含特定格式 @import 规则的 CSS 文件时，系统会抛出"InterpolatedFunctionExpression 不是 StringExpression 的子类型"的错误。

问题现象

用户在使用 yarn build:css 命令构建项目时，会遇到以下错误提示：

TypeError: Instance of 'InterpolatedFunctionExpression': type 'InterpolatedFunctionExpression' is not a subtype of type 'StringExpression'

经过验证，这个问题在 1.79.4 版本中不存在，但在 1.79.5 及更高版本中都会出现。

问题根源

深入分析后发现，这个问题与 CSS 文件中 @import 规则的特殊使用方式有关。具体来说，当 CSS 文件中包含以下格式的 @import 规则时会出现问题：

1. 使用带引号的 URL 字符串：@import url("quoted-url-string");
2. 使用 src() 函数的变体语法：@import src("url-string");

dart-sass 解析器在处理这些特定格式的 @import 规则时，未能正确识别 URL 字符串的类型，导致类型转换失败。

解决方案

目前有以下几种可行的解决方案：

1. 文件扩展名方案：将包含 @import 规则的文件扩展名从 .css 改为 .scss。Sass 处理器对 .scss 文件中的 @import 规则有更好的支持。

2. URL 格式调整：避免在 @import 规则的 URL 中使用引号，改为直接使用：@import url(unquoted-url-string);

3. 版本回退：暂时回退到 1.79.4 版本，等待官方修复。

技术背景

根据 CSS 规范，@import 规则支持两种语法格式：

1. 传统 URL 格式：@import url(string);
2. 现代 src() 函数格式：@import src(string);

其中 src() 函数允许引用 CSS 变量，而 url() 则不支持。dart-sass 当前版本对 src() 格式的支持尚不完善，导致了这次解析异常。

最佳实践建议

1. 在 Sass 项目中，尽量使用 .scss 文件扩展名而非 .css
2. 避免在 @import 规则的 URL 中使用不必要的引号
3. 考虑使用 Sass 的 @use 规则替代 @import（Sass 官方推荐）
4. 对于必须使用纯 CSS 的场景，确保 @import 语法简洁规范

这个问题预计会在未来的 dart-sass 版本中得到修复，开发团队已经注意到这个解析器缺陷并开始着手解决。在此期间，开发者可以采用上述解决方案之一来规避问题。