CSS @import inside a class

Question

I am attempting to do the following:

.bootstrap-scope { 
  @import "bootstrap.min.css";
}

I know bootstrap.min.css is in the proper place because placing @import "bootstrap.min.css"; at the top of the css page works fine.

Anyways, the point is to be able to scope out what is affected by bootstrap. I would like bootstrap to only be applied to the enclosing div

<div class="bootstrap-scope">
...
</div>

Any ideas? This seems like it should be straightforward.

this post suggested to put the import inside a class.. Are there any alternatives?

Answer 1

You cannot @import inside a CSS rule. @import statements must be declared outside any selectors.

From the MDN page on @import:

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

You would have to write such a thing in LESS or SASS, and preprocess it into CSS.

Your linked question suggests creating a LESS file that import Bootstrap's LESS code, and then compile that to CSS.