Question

删除所有* = 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应该是什么样子

Answer 1

<强> 1。关于要求

*= 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。覆盖引导样式

要覆盖引导程序样式，请按照此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。可能不太好。

更新1

如果您想使用sass。在你的application.sass

@import nprogress
@import global
@import articles

在rails

1 个答案: