How do I include an external CSS file as a rule for a class inside a .scss file?

Viewed 2663

I want to use bootstrap-3.3.7.min.css rules for only a particular section of my page. So, I downloaded it, created a new file called bootstrap.scss and tried to add this rule to it. I use django on my site, so I installed sass and added precompiler rules to my settings.

In my bootstrap.scss file, I added this rule to affect all bs3 classes:

.bs3 {
  @include bootstrap-3.3.7.min.css;
}

bootstrap-3.3.7.min.css is in the same directory as bootstrap.scss, so I'm not sure if I still need to specify full path.

In my templates:

<link href="{% static "css/bootstrap.scss" %}" rel="stylesheet" type="text/css" />

<input id="example" type="submit" class="bs3 delBtn" value=" " rel='popover' data-placement='right' data-content='Some message'/>

The idea is to get that .scss file rules working only for elements with a class of bs3. As you have guessed, this isn't working. I don't see changes to that class whatsoever. But if I add body{background-color: red;} to bootstrap.scss, I can see that change, so I know that the scss file is being loaded.

I tried a couple of fixes from other stackoverflow questions, such as:

  1. Using import instead of include - @import "full/path/to/file.css"
  2. Using import without .css in the end of the file

Neither of those things worked. I am brand new to the world of SASS and I may have made some silly mistakes here. If you could point them out, that'd be very helpful. Thanks!

2 Answers
Related