对 custom.css.scss 进行微小更改后，Bootstrap 无法正常工作 [英] Bootstrap not working after minor change to custom.css.scss

问题描述

与此问题类似:rails:对 custom.css.scss 的任何更改使应用程序崩溃

我对 custom.css.scss 文件进行了更改，所有对颜色的引导程序引用都停止工作.我现在已经手动输入了这些颜色的十六进制值并加载了应用程序，但是我的导航栏的类现在不起作用.

I have made a change to my custom.css.scss file and all the bootstrap references to colors stopped working. I have manually entered the hex values for these colors now and the app loads, but the classes for my navbar are now not working.

由于某种原因，我现在似乎在引用任何引导程序类时遇到问题.我也不明白为什么对样式表进行微小更改会使我的引导程序样式崩溃.我想我一定在其他地方遇到了设置问题.

It seems that I have a problem referencing any of the bootstrap classes now for some reason. I also do not understand why making a minor change to a stylesheet has sent my bootstrap styles into a meltdown. I think I must have a setup problem elsewhere.

custom.css.scss:

custom.css.scss:

@import "bootstrap";

/* mixins, variables, etc. */

$grayMediumLight: #eaeaea;
$gray-darker: #222;
$gray-dark: #333;
$gray: #555;
$gray-light: #999;
$gray-lighter: #eee;

相关宝石

gem 'rails', '4.0.2'
gem 'bootstrap-sass', '2.3.2.0'
gem 'sprockets', '2.11.0'
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'

除此之外，我最近将 bootstrap.css 和 bootstrap.min.css 文件添加到 vendor/assets/stylesheets 和相同的 .js 文件以使用折叠面板类.

In addition to this, I recently added the bootstrap.css and bootstrap.min.css file to vendor/assets/stylesheets and the same .js files to use a collapsing panel class.

非常感谢任何帮助.

application.css:

application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * 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 bootstrap.min
 *= require_self
 *= require_tree .
 */

更新:

所以我删除并重新包含了 bootstrap.css 和 bootstrap.min.css 文件，主要的导航栏样式又恢复了生机.唯一仍然不起作用的是导航栏中我的下拉列表的颜色和样式的引用.

So I removed and then re-included the bootstrap.css and bootstrap.min.css files and the main navbar styles came back to life. The only things that are still not working are the references to colors and the styles for my drop-down list in the navbar.

推荐答案

从 vendor/assets/javascript 和 vendor/assets/stylesheets 文件夹中删除引导文件也为我解决了这个问题.

removing bootstrap files from the vendor/assets/javascript and vendor/assets/stylesheets folders solved this issue for me too.

这篇关于对 custom.css.scss 进行微小更改后，Bootstrap 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！