Question

这就是我在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，bootstrap工作正常，但我想将自己的样式添加到某些部分。对于noobish问题很抱歉，但是试图找到一个解决方案并且无法使其正常工作。

我的application.scss是

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

我的application.js是

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

Answer 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>

现在您的assets / stylesheets文件夹可以像这样组织：

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

然后在application.scss中导入所有这些文件，包括bootstrap：

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

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

添加自己的样式表时，Bootstrap样式会中断

1 个答案: