Question

我的应用程序启动并运行了一些Bootstrap功能。到现在为止还挺好。我知道导航栏的2种默认颜色是黑色和白色，使用navbar-default和navbar-inverse。我试图将导航栏颜色更改CSS添加到assets / stlyesheets / application.css文件，但没有任何运气。改变它的颜色是绿色。（一个灌溉系统的网站。绿色的草，yay）

这就是我的application.css文件目前的样子。

 /*
 * This is a manifest file that'll be compiled into application.css, which will include all the 
 files listed below
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets 
 /stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

 .navbar-default {
     background-color: #33FF33;
     border-color: #E7E7E7;
 }

Answer 1

在app/assets/stylesheets下创建一个新文件，将自定义样式添加到文件中，然后将其包含在application.css.scss中。

@import custom_navbar.css.scss;

您需要将application.css更改为application.css.scss并完全删除评论。然后，您将使用@import指令导入所需的文件。

请注意，这有点脱离惯例，但它可能适用于您的目的。您可以在SASS博客上阅读有关structuring SASS projects的更多信息。

Answer 2

如果您正在使用bootstrap-sass gem（您应该），正确的方法是在application.css.scss中设置引导变量，然后再包含bootstrap：

$navbar-default-bg: #33FF33;
$navbar-default-border: #E7E7E7;

@import "bootstrap";

在我的Bootstrap / Rails应用程序中，我将自定义导航栏CSS添加到哪个文件？

2 个答案: