引入自定义样式表后Bootstrap样式失效问题求助

咱们一步步来搞定这个问题，你其实已经快成功了，只是几个拼写错误和加载方式冲突的小问题在拖后腿！

首先，先修正代码里的拼写错误（这些是关键坑） #

• application.html.erb里的拼写错误：把data-turbolineks-track改成data-turbolinks-track（注意是turbolinks不是turbolineks），修正后的代码片段：

  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  

• application.scss里的拼写错误：把@import "boostrap";改成@import "bootstrap";（少了一个t），正确的导入：

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

• application.js里的冗余内容：把//= require_tree . here里的here删掉，改成//= require_tree .，这行的作用是加载所有同目录下的JS文件，不需要额外的文字。

接下来，选择一种Bootstrap加载方式（二选一，避免冲突） #

你现在的核心问题是同时用了CDN的Bootstrap和本地Sprockets导入的Bootstrap，两者会互相冲突，所以得选一种方式：

方案一：用本地导入的Bootstrap（推荐，方便自定义）

这种方式下，我们移除HTML里的CDN链接，完全通过Rails的资产管道加载Bootstrap和自定义样式：

修正后的application.html.erb：

<head>
  <title>Software & Cia.</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= csrf_meta_tags %>
</head>

然后在application.scss里，你可以直接在Bootstrap导入之后写自定义样式，这样你的样式会覆盖Bootstrap的默认样式：

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

/* 在这里写你的自定义样式，比如： */
.navbar-custom {
  background-color: #2c3e50;
}

.btn-primary-custom {
  background-color: #e74c3c;
  border-color: #e74c3c;
}

application.js保持修正后的样子即可：

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

方案二：用CDN加载Bootstrap + 自定义样式

如果你更倾向于用CDN的Bootstrap，那我们移除本地的Bootstrap导入，只保留自定义样式：

application.html.erb保留CDN链接：

<head>
  <title>Software & Cia.</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= csrf_meta_tags %>
</head>

然后application.scss里移除Bootstrap导入，只写自定义样式：

/* 你的自定义样式，会在CDN的Bootstrap之后加载，自动覆盖默认样式 */
.card-shadow {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

application.js里可以移除//= require bootstrap-sprockets，因为已经用CDN加载了Bootstrap的JS：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

为什么这样能解决问题？ #

• 拼写错误导致本地的Bootstrap没有被正确导入，所以之前保留stylesheet_link_tag时，Bootstrap没生效，反而可能和CDN的版本冲突。
• 同时加载CDN和本地的Bootstrap会导致样式/JS冲突，选一种方式就能避免这个问题。
• 自定义样式放在Bootstrap之后加载（不管是本地导入后写，还是CDN之后加载application.css），就能正确覆盖Bootstrap的默认样式。

内容的提问来源于stack exchange，提问作者Italo