7

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?

knagode
  • 5,816
  • 5
  • 49
  • 65

2 Answers2

4

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/*";
knagode
  • 5,816
  • 5
  • 49
  • 65
0

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

Hichem ben chaabene
  • 145
  • 6