如何在 rails/sass 中重用(扩展)bootstrap css 类 [英] How to reuse (extend) bootstrap css classes in rails/sass

问题描述

我在 core.scss 文件中@import "boostrap"，该文件还导入了其他 scss 文件(例如:_modals.css).

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

在 modals.css 中，我想扩展一些引导类:

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

.modal-container {
  @extend .row;
}

并且扩展没有按预期工作:

And extend does not work as expected:

第 42 行的警告....../_modals.css.scss:.row"未能@extend .row".未找到选择器.row".这将是 Sass 未来版本中的一个错误.使用@extend .row!optional" 如果扩展应该能够失败.

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.

• 我让它工作的唯一方法是再次@importbootstrap"_modals.scss 但这实际上包括此文件中的整个引导程序...

  • 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...

    另一种解决方案是移动所有扩展 css 的定义core.css 文件 - 在这种情况下 - 结构少得多的 css ...

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

    我该怎么做才能正确?

    推荐答案

    问题是我也通过 sass require/require_tree 命令导入文件.

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

     *= require_tree ./autoinclude
    

    如果所有文件都通过@import 函数导入，则一切正常！

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

    @import "autoinclude/*";
    

    这篇关于如何在 rails/sass 中重用(扩展)bootstrap css 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！