Стили Bootstrap ломаются, когда я добавляю собственные таблицы стилей - PullRequest
Новая
       0

Стили Bootstrap ломаются, когда я добавляю собственные таблицы стилей

0 голосов
/ 22 мая 2018

Это то, что у меня есть в моем файле 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

1 Ответ

0 голосов
/ 22 мая 2018

Если вы хотите использовать Bootstrap в рельсах, это хороший способ использовать самоцвет начальной загрузки (то же самое для jquery) 

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

Таким образом вы сохраняете свое приложение <head>clean: 

<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

И вы импортируете все эти файлы, включая начальную загрузку, в ваше приложение .scss: 

@import "bootstrap";
@import "custom_folder/custom1";
@import "custom_folder/custom2";
@import "another_custom";
  • Если у вас есть несколько файлов в пользовательской папке, вы даже можете создать index.scss, куда вы импортируете все свои файлы и просто импортируете "custom_folder/index" в application.scss
  • Если вы переопределяете некоторые переменные boostrap в файле, импортируйте эту до bootstrap
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...