unknown at rule @include css(unknownAtRules) error while including @include in css file

Question

I am trying to customize card columns by using Bootstrap 4 card layout. But why it is showing error if i am writing this code in my css file?

Error showing is in VS code: unknown at rule @include css(unknownatrules)

HTML file

<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 file

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

score 14 · Answer 1 · answered May 29 '20 at 19:42

14

@include is a SASS feature not CSS feature. Alternatively, you can turn the warning off by

  "css.lint.unknownAtRules": "ignore"

Reference : https://github.com/microsoft/vscode/issues/53175

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

answered May 29 '20 at 19:42

Avinash Dalvi

8,551
7
27
53

I did this but the column size is not getting changed as per my code which I have written in css file – Sumit Trivedi May 30 '20 at 01:30
you can try if possible to use scss file. – Avinash Dalvi May 30 '20 at 18:09

score 6 · Answer 2 · answered Feb 09 '21 at 07:47

6

If you use scss, than "scss.lint.unknownAtRules": "ignore".

answered Feb 09 '21 at 07:47

Vyacheslav

61
1
2

score 4 · Answer 3 · answered Jan 29 '22 at 12:10

4

The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS.

VS Code has a PostCSS Language Support plugin you can use that works great with morden CSS.

answered Jan 29 '22 at 12:10

D.M.

39
2

score 1 · Answer 4 · answered Jul 19 '21 at 07:21

From this github issue, you need to add stylelint-scss to your devDependencies and in your .stylelintrc should have the following to turn off the warning.

{
  ...
  plugins: ["stylelint-scss"],
  "rules": {
    ...
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    ...
  }
}

unknown at rule @include css(unknownAtRules) error while including @include in css file

4 Answers4