title: unknown at rule @include css(unknownAtRules) error while including @include in css file
body: <p>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?</p>
  
  <p>Error showing is in <a href="https://i.stack.imgur.com/OWvLD.png" rel="noreferrer">VS code</a>:
  unknown at rule @include css(unknownatrules)</p>
  
  <p>HTML file
  </p>
  
  <pre><code>&lt;div class="card-columns"&gt;
    &lt;div class="card" *ngFor="let item of vision"&gt;
      &lt;div class="card-header"&gt;{{item.heading}}&lt;/div&gt;
      &lt;carousel [showIndicators]="false"&gt;
        &lt;slide *ngFor="let item of vision"&gt;
          &lt;img class="card-img-top embed-responsive embed-responsive-16by9" [src]="item.img" alt="vision image"&gt;
        &lt;/slide&gt;
      &lt;/carousel&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  CSS file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.card-columns {
    @include media-breakpoint-only(md) {
      column-count: 3;
    }
    @include media-breakpoint-only(lg) {
      column-count: 4;
    }
  }</code></pre>
  </div>
  </div>
  </p>