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:
- Using
importinstead ofinclude-@import "full/path/to/file.css" - Using
importwithout.cssin 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!