How to reuse (extend) bootstrap css classes in rails/sass

Question

I @import "boostrap" in core.scss file which also import other scss files (e.g.: _modals.css).

In modals.css I want to extend some bootstrap classes:

.modal-container {
  @extend .row;
}

And extend does not work as expected:

WARNING on line 42 of ....../_modals.css.scss: ".row" failed to @extend ".row". The selector ".row" was not found. This will be an error in future releases of Sass. Use "@extend .row !optional" if the extend should be able to fail.

• The only way I made it work is to @import "bootstrap" again in _modals.scss but this actually includes the whole bootsrap inside this file...

  The other solution is to move all definitions which extends css in core.css file - in this case - css in much less structured ...

How should I do it properly?

Answer 1

The .row has to be in the same file somewhere in the previous lines of code.

@extend is not that good and you can't use it within media queries, if you overuse it you will end up introducing inconsistencies on the code.

define a mixin in another file and use @import instead

Answer 2

Problem was because I also imported files via sass require/require_tree command.

 *= require_tree ./autoinclude

If all files are imported via @import function, everything works!

@import "autoinclude/*";