Css 使用Rails 4引导Sass

我试图在我的rails（4.0.0）项目中使用引导sass（3.1.0.2）和sass rails（4.0.1）

我的application.css.scss文件如下所示：

/*
 * 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_self
*= require font-awesome
*= require_tree .
*/ 

@import "bootstrap";

我的bootstrap_和_overrides.css.scss文件位于stylesheets文件夹中，如下所示：

/*
 * 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_self
*= require font-awesome
*= require_tree .
*/ 

@import "bootstrap";

我已经设置了一个测试页面，可以使用以下内容进行测试：

    <div class="container">
<h2>test terms</h2>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="bg-primary">.dfd..</p>
<p class="bg-success">..sdfas.</p>
<p class="bg-info">..sdfs.</p>
<p class="bg-warning">.asdf..</p>
<p class="bg-danger">.adf..</p>
<p>test terms</p>


<button type="button" class="btn btn-primary">Default</button>

</div>
<button type="button" class="btn btn-info">Info</button>

测试术语
h1。引导标题辅助文本
.dfd
…SDFA
…SDF
.asdf
.adf
测试术语

违约
信息

当我启动服务器并访问页面时，它以纯文本呈现，而不使用引导样式

如果您有任何关于如何做的想法，我们将不胜感激。这里似乎有几个人不用宝石。这种做法有什么原因吗？非常感谢

以下是我的设置：

require_树。

已禁用，但将导入单个CSS文件（

base

，

事件

）。

以下是我的设置：

---

require\u tree.

被禁用，但导入单个CSS文件（

base

，

events

）。

几天前我遇到了几乎相同的问题。我的配置完全相同，但引导的样式效果很少不起作用（尤其是bg，无论什么颜色）。经过几次gems更新后，问题消失了

我更新的一些珍宝

gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'

别忘了：

bundle update

这是我的application.scss的一部分，我想给你一个想法

*= require jquery.ui.all
*= require select2
*= require font-awesome
*/

@import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
@import "bootstrap";

@import "general_layout";
@import "header";
@import "footer";
@import "menus";
@import "pagination";
@import 'login';
@import "error";

---

希望有帮助

几天前我遇到了几乎相同的问题。我的配置完全相同，但引导的样式效果很少不起作用（尤其是bg，无论什么颜色）。经过几次gems更新后，问题消失了

我更新的一些珍宝

gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'

别忘了：

bundle update

这是我的application.scss的一部分，我想给你一个想法

*= require jquery.ui.all
*= require select2
*= require font-awesome
*/

@import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
@import "bootstrap";

@import "general_layout";
@import "header";
@import "footer";
@import "menus";
@import "pagination";
@import 'login';
@import "error";

---

希望有帮助

你能把html页面的源代码贴出来吗？它可能有一些信息。还有布局文件（如果可能）您是否运行了

bundle

？是否尝试在application.css.scss中启动所需的引导？或者尝试在conflig/application.rb中添加require（对我来说，第二种方式工作，第一种方式返回错误）嗨，Marko，我不需要它，因为getbootstrap上的建议表明它会阻止我修改其他表单中的样式。不过，谢谢你的提示——如果我找不到其他方法让它工作的话，我会试试的。再次感谢您能发布html页面的源代码吗？它可能有一些信息。还有布局文件（如果可能）您是否运行了

bundle

？是否尝试在application.css.scss中启动所需的引导？或者尝试在conflig/application.rb中添加require（对我来说，第二种方式工作，第一种方式返回错误）嗨，Marko，我不需要它，因为getbootstrap上的建议表明它会阻止我修改其他表单中的样式。不过，谢谢你的提示——如果我找不到其他方法让它工作的话，我会试试的。再次感谢Victor，谢谢分享。我想知道css行动的顺序是否重要。我已经在stylesheets文件夹中的一个单独的文件中导入引导，该文件由树获取。我已经尝试了你的设置，但没有任何运气，但会尝试创建一个新的项目-可能是因为其他地方有一些错误导致它无法工作。非常感谢您的回复。是的，CSS导入的顺序很重要。在我的例子中，如果在我的

base.css.scss

中有

body{background:white}

，并且在我的

events.css.scss

中有

body{background:red}

，那么

body

背景

将是

红色的，因为后者会覆盖前面的css。使用Hi Victor，谢谢分享。我想知道css行动的顺序是否重要。我已经在stylesheets文件夹中的一个单独的文件中导入引导，该文件由树获取。我已经尝试了你的设置，但没有任何运气，但会尝试创建一个新的项目-可能是因为其他地方有一些错误导致它无法工作。非常感谢您的回复。是的，CSS导入的顺序很重要。在我的例子中，如果在我的
base.css.scss
中有
body{background:white}
，并且在我的
events.css.scss
中有
body{background:red}
，那么
body
背景
将是
红色的，因为后者会覆盖前面的css。使用