当我添加自己的样式表时，引导样式中断答案

【问题标题】：Bootstrap styling breaks when I add own stylesheets当我添加自己的样式表时，引导样式中断
【发布时间】：2018-05-22 07:46:19
【问题描述】：

这就是我的 application.html.erb 文件中的内容。

<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-turbolineks-track': 'reload' %>
   <%= csrf_meta_tags %>
</head>

如果我删除应用程序stylesheet_link_tag，引导程序工作得很好，但我想在某些部分添加我自己的样式。抱歉这个问题很简单，但试图找到解决方案但无法正常工作。

我的 application.scss 是

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

我的 application.js 是

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

【问题讨论】：

可能是因为您的样式覆盖了引导程序？你有很多款式吗？或者任何可以重置您的 HTML 样式的外部库？
只有 2 个文件，它破坏了我尚未编辑的类。
尝试使用gem bootstrap 直接在application.scss 中导入bootstrap，以避免将其包含在<head> 中
我已经这样做了。以为我也需要在内执行此操作。尝试从中删除它并且样式中断。
你的 application.scss 文件怎么样？你如何导入引导程序和你的自定义 scss 文件？

标签： ruby-on-rails bootstrap-4

【解决方案1】：

如果你想在rails中使用Bootstrap，使用bootstrap gem是一个好方法（jquery也是这样）

gem 'turbolinks', '~> 5'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

这样你可以保持你的应用程序<head>干净：

<head>
  <title>Software & Cia.</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

现在您的资产/样式表文件夹可以这样组织：

stylesheets
  |_ custom_folder
  |   |_ custom1.scss
  |   |_ custom2.scss
  |
  |_ application.scss
  |_ another_custom.scss

然后您将所有这些文件（包括引导程序）导入您的 application.scss：

@import "bootstrap";
@import "custom_folder/custom1";
@import "custom_folder/custom2";
@import "another_custom";

如果您在自定义文件夹中有多个文件，您甚至可以创建一个 index.scss 导入所有文件并导入 "custom_folder/index" 在 application.scss 中
如果您覆盖文件中的某些自举变量，请在之前引导程序

【讨论】：

在这里一步一步地做了一切，我使用的是 sass gem，但它工作得很好。谢谢！