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

Question

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

remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

我目前的 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 样式，我必须使用 !important 并且我无法访问 bootstrap 混入和变量

那么在使用 bootstrap-sass

时 application.scss 应该是什么样子

Answer 1

1.关于要求

*= require_self 表示使用这个文件 (application.scss)

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

在我看来，您应该改用 require all file on tree 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。覆盖 bootstrap 样式

要覆盖 bootstrap 样式，请遵循此 customize

另一种更改样式的方法 bootstrap 是，将 ID 放入您要更改的项的父项或其自身

例如：

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

现在您想将 class btn-primary 更改为 background-color: red

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

你的风格：

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

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

更新 1

如果要使用sass。在你application.sass

@import nprogress
@import global
@import articles

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

what should application.scss look like when using bootstrap-sass ruby on rails

ruby

ruby-on-rails

bootstrap-sass