6

我正在尝试使用 Bootstrap 4 卡片布局来自定义卡片列。但是，如果我在我的 css 文件中编写此代码，为什么它会显示错误？

错误显示在VS 代码中：未知规则 @include css(unknownatrules)

HTML 文件 

<div class="card-columns">
  <div class="card" *ngFor="let item of vision">
    <div class="card-header">{{item.heading}}</div>
    <carousel [showIndicators]="false">
      <slide *ngFor="let item of vision">
        <img class="card-img-top embed-responsive embed-responsive-16by9" [src]="item.img" alt="vision image">
      </slide>
    </carousel>
  </div>
</div>

CSS 文件

.card-columns {
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
}

4

4 回答 4

9

@include 是 SASS 功能而不是 CSS 功能。或者，您可以通过以下方式关闭警告

  "css.lint.unknownAtRules": "ignore"

参考：https ://github.com/microsoft/vscode/issues/53175

https://github.com/stylelint/stylelint/issues/3190

于 2020-05-29T19:42:09.097 回答
3

如果您使用 scss，则比“scss.lint.unknownAtRules”：“ignore”。

于 2021-02-09T07:47:56.840 回答
2

解决这个问题的方法几乎总是为您的编辑器/IDE 安装一个插件来支持 PostCSS 语言，而不是常规的 CSS。

VS Code 有一个PostCSS 语言支持插件，你可以使用它与现代 CSS 配合得很好。

于 2022-01-29T12:10:40.170 回答
1

从这个github 问题中，您需要添加stylelint-scss到您的devDependencies并且.stylelintrc应该有以下内容以关闭警告。

{
  ...
  plugins: ["stylelint-scss"],
  "rules": {
    ...
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    ...
  }
}
于 2021-07-19T07:21:17.363 回答