Question

我目前正在学习Rails并开发一个简单的SocialMedia / Blog应用程序。我正处于设置基本视图并尝试将BootStrap CSS应用于它的位置。

我在尝试将BootStrap应用于我的应用程序时遵循以下步骤：

1。）将gem'bootstrap-sass'添加到gemfile中并运行'bundle install'

2。）将'* = require bootstrap'添加到application.css

3。）将“// = require bootstrap”添加到application.js

4）。加入：

<div class="container">
   <%= yield %>
 </div>

然而，当我打开应用程序时，我收到错误说明

couldn't find file 'bootstrap' with type 'text/css'

它会突出显示“* = require bootstrap”

这一行

但是，当我将扩展名更改为application.css.scss并添加了如下的@import语句时，它适用于BootStrap应用

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, or any plugin's
* vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over 
styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after 
the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require bootstrap
*= require_self
*/
@import "bootstrap";

所以2个问题......
1.）为什么我的应用程序需要.scss和@import才能使BootStrap正常工作？

2。）为什么我的“ = require bootstrap”需要“ = require_bootstrap”？

谢谢！

Answer 1

Bootstrap-sass是bootstrap CSS的Sass实现，最初是用Less编写的。

如果您希望只是 Less css，您可以从getbootstrap.com获取

如果您希望继续使用bootstrap-sass：

您需要将application.css重命名为application.scss。
删除*= require bootstrap。
如下所示添加行以@import开头。
此外，您还需要加入bootstrap-sprockets。

这是我的工作引导应用程序的application.scss文件的外观：

...
 *
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";
...

我的applicaiton.js

...
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//    
...
//= require bootstrap-sprockets
...

在题为“使用Rails集成Bootstrap”的章节中查看此参考https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1/。

Answer 2

application.css.scss：

*= require bootstrap  #remove it
*= require_self
*= require_tree .
*/

的application.js

//= require bootstrap-sprockets
//= require jquery

最重要的是打开一个新的scss文件并添加：

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

rails应用程序中的Bootstrap仅适用于.scss

2 个答案: