3

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?

Community
  • 1
  • 1
starvator
  • 989
  • 1
  • 11
  • 26

1 Answers1

5

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.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
  • 1
    so... how would I accomplish this? [this post](http://stackoverflow.com/questions/10568065/limit-the-scope-of-bootstrap-styles) suggested this exact solution.. – starvator Mar 21 '15 at 02:50
  • @starvator That answer uses LESS, a preprocessor that can produce CSS from LESS code, such as Bootstrap's source LESS. This cannot be done with pure CSS. – Alexander O'Mara Mar 21 '15 at 02:53