在scss文件中@use的VSCode警告

Question

我有一个看起来像这样的 scss 文件

@use "colors";

.content {
    color: colors.$text;
}

这与我当前版本的 sass 编译得很好（我使用的是 dart-sass 版本 v1.23.7）

但是 VSCode 在问题面板中显示了 3 个问题，看起来有点像这样

似乎我需要做一些事情来更新所使用的 scss 的底层版本，但我一生都无法弄清楚这个设置在哪里？

这些错误之一的详细信息是：

{
    "resource": "Untitled-1",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "css-ruleorselectorexpected",
    "severity": 8,
    "message": "at-rule or selector expected",
    "source": "scss",
    "startLineNumber": 5,
    "startColumn": 1,
    "endLineNumber": 5,
    "endColumn": 2
}

Answer 1

看起来这个扩展scss 模块将解决这个问题，直到新语法被合并到 vscode 中。

跟踪https://github.com/microsoft/vscode/issues/81943

---

更新：v1.41 增加了对 scss 模块的支持。 请参阅https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#sass-modules-support

Sass 模块支持

Sass最近推出了新的模块系统。

我们在 SCSS 文件中添加了语法高亮支持，以及对 SASS 模块的语言功能支持。 语言特点包括：

• @use 和 @forward 的自动完成
• @use 和 @forward 路径的路径完成
• 自动补全 SASS 内置模块，如 sass:math 和 sass:color
• @use 和 @forward 导入路径的文档链接