CODEWITHSUNDEEP
csstwitter-bootstrap
starvator
starvator

Reputation: 1017

CSS @import inside a class

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?

Upvotes: 3

Views: 9960

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60517

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.

Upvotes: 5

Related Questions