VS Code 无法识别容器类型属性和 @container 规则？

Question

我试图创建一张卡并使用容器类型属性和 @container 规则修改其行为，caniuse 中表示支持它，但 VS Code 无法识别它们，有人知道为什么和/或如何修复吗？

参考图像

我不太确定我应该做什么，我检查了https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries但没有找到具体的答案。

我还尝试从 chrome lab ----> chrome://flags/ 激活它，但由于它应该受支持，所以没有出现在那里。

请记住，我仍在学习 CSS。

Answer 1

VS Code 1.85+ 答案

CSS 和 SASS/SCSS 语言模式现在部分支持它。

对于 SASS/SCSS 更改，请参阅scss #371 中的修复层和容器。

VS Code 1.84 答案

现在 CSS 语言模式已部分支持，但 SASS/SCSS 语言模式尚不支持。为此，请参阅问题票[scss] 使用插值解析容器查询时出错 #197744。

@container支持@container添加了支持，准备 6.2.10 #365，它将在 VS Code 1.84 中发布（源代码）。

VS Code 1.83 答案

现在 CSS 语言模式已部分支持，但 SASS/SCSS 语言模式尚不支持。支持@container正在等待中。

请参阅拉取请求添加对容器、容器名称和容器类型的支持。#14，已合并。另请参阅 Pull Request Update CSS 语法 #193333，它将container、container-name、 和 等属性添加container-type到 CSS 语法中。

VS Code 1.83 之前的答案

这是 VS Code 待办事项中的一个未决问题。请参阅[css] 支持 CSS 属性container-type#170589（[css] 支持 @container css 规则 #179314已关闭，以支持跟踪那里的总体问题）。

同时，您可以使用VS Code 的自定义数据机制来解决该问题。在工作区文件夹中创建一个包含以下内容的 JSON 文件（或者可以选择重用您为其他目的创建的现有文件）：

{
  "version": 1.1,
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
  "atDirectives": [
    {
      "name": "@container",
      "description": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries"
    }
  ],
  "properties": [
    {
      "name": "container-type",
      "description": "https://developer.mozilla.org/docs/Web/CSS/container-type"
    },
    {
      "name": "container-name",
      "description": "https://developer.mozilla.org/en-US/docs/Web/CSS/container-name"
    },
    {
      "name": "container",
      "description": "https://developer.mozilla.org/en-US/docs/Web/CSS/container"
    }
  ]
}

然后在您的工作区.vscode/settings.json文件中添加以下内容：

"css.customData": [
   "css-container-custom-data.json"
   // ^ whatever the name/path of your custom data file is
],

我还建议您查看wileyCoyote的改进版本。