I'm starting my first rails project. In this project I will be using Bootstrap and SASS. I want to avoid (for the most part) putting style-related classes into my HTML, as explained in this post:
Using Sass To Semantically @extend Bootstrap
I have included bootstrap-sass in my project using Bower and following the instructions here:
https://github.com/twbs/bootstrap-sass#bower-with-rails
Now bootstrap itself is working, since I can use its classes in my HTML and everything renders just fine. But if I try to extend one of my classes with a Bootstrap class, for example:
.myClass
@extend .text-muted
Then I get the following error:
".myClass" failed to @extend ".text-muted".
The selector ".text-muted" was not found.
Use "@extend .text-muted !optional" if the extend should be able to fail.
I guess it might have something to do with my Sass files being loaded before Bootstrap but I don't know what to do.
The following is the content of my application.css.sass file, in which some things are *= required and others are @imported (I'm not sure whether this is how things should be done).
/*
*= require components-font-awesome
*= require_self
*= require_tree .
*/
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/"
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets"
@import "bootstrap-sass/assets/stylesheets/bootstrap"
How can I solve this problem?
The Bootstrap-Sass doc suggests to remove the requires from your application.sass, as you "will not be able to access the Bootstrap mixins or variables."
You should remove
*= require_tree .
and make sure to @import all relevant files (you seem to do that already).
require_tree will automatically include all stylesheets below your app/assets/stylesheet/ folder and will certainly provoke some duplication or even a wrong load order. instead gain control by importing the files 'manually' in the desired order.
Now @extend either inside the application.sass or in a different partial that you @import after the bootstrap files and you should be good to go.