首页 文章

在rails上使用bootstrap-sass ruby时application.scss应该是什么样子

提问于
浏览 次
2

当使用bootstrap-sass时，文档说：

删除所有* = require_self和* = require_tree . 来自sass文件的语句 . 而是使用@import导入Sass文件 .

我目前的application.scss看起来像

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "*";

问题是，如果我想覆盖我必须使用的引导样式！重要，我无法访问bootstrap mixins和变量

那么当使用bootstrap-sass时application.scss应该是什么样子

ruby-on-rails ruby bootstrap-sass

1 回答

  • 1

    1. About require

    *= require_self 表示使用此文件（application.scss）

    *= require_tree . 表示使用文件夹（树）上的所有文件 stylesheets

    在我看来，你应该使用树上的所有文件而不是 require_tree . 由于需要逐个文件，您可以控制要运行的文件的顺序 .

    所以请保留 *= require_self 并删除 *= require_tree . 并要求您需要的所有文件 .

    我的示例application.scss

    /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require nprogress
 *= require nprogress-bootstrap
 *= require nprogress-turbolinks5
 *= require global    
 *= require articles
 *= require search
 *= require footer
 *= require header
 *= require contacts
 *= require notices
 *= require aui-flash
 *= require_self
 */


@import "bootstrap-sprockets";
@import "bootstrap";

    2. Override bootstrap styles

    要覆盖引导程序样式，请按照此customize

    更改样式引导程序的另一种方法是将ID添加到要更改的项目或其自身的父项

    例如：

    你有 <button class="btn btn-primary">Hello</button>

    现在你要将类 btn-primary 更改为 background-color: red

    你可以试试 <button class="btn btn-primary" id="red-primary">Hello</button>

    你的风格：

    #red-primary.btn-primary{
  background-color: red;
}

    但是通过这种方式，每个想要覆盖样式的项目都必须具有ID . 可能不太好 .

    UPDATE 1

    如果你想使用 sass . 在你的application.sass中

    @import nprogress
@import global
@import articles
    回复于

相关问题