未知的规则 @include css(unknownAtRules) 在 css 文件中包含 @include 时出错。

Question

我正在尝试使用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;
  }
}

Answer 1

@include是一个SASS功能，而不是CSS功能，或者，你可以通过以下方法关闭该警告

  "css.lint.unknownAtRules": "ignore"

参考文献 : https:/github.commicrosoftvscodeissues53175。

https:/github.comstylelintstylelintissues3190。