什么是在我的应用程序中包含bootstrap的正确方法.css.scss文件

Question

我正在使用Rails 4.2.3。我有此文件，应用程序/资产/样式表/application.css.scss（不要问我为什么，当我创建项目时，Rails只是为我自动创建此文件）。

/*
…
 *= require_self
 *= require_tree .
 *= require jquery-ui
 */
html {
    background-image: url(/assets/tile.jpg);
    background-repeat: repeat;
    background-position: left top;
}

我想添加Bootstrap，并建议使用各种教程，我添加了" @import"语句以使其正常工作。所以我尝试了

…
 *= require_self
 *= require_tree .
 *= require jquery-ui
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme'
html {
    background-image: url(/assets/tile.jpg);
    background-repeat: repeat;
    background-position: left top;
}

但是现在，当我加载页面时，我会收到错误

Sass::SyntaxError in Users#edit
Invalid CSS after "html ": expected selector or at-rule, was "{"

在我的应用程序中包含Bootstrap指令的正确方法是什么？

我个人更喜欢在SCSS上导入所有资产。

将bootstrap宝石添加到gemfile，https://rubygems.org/gems/bootstrap。在app/assets/stylesheets和app/assets/javascripts中创建文件夹bootstrap_and_overrides。

app
 |_assets
   |_javascripts
     |_bootstrap_and_overrides
       |_bootstrap.js 
   |_stylesheets
     |_bootstrap_and_overrides
       |_bootstrap.scss
       |_variables.scss
       |_overrides.scss

您的application.js看起来像这样：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require tether
//= require bootstrap_and_overrides/bootstrap

和您的application.css.scss：

@import "bootstrap_and_overrides/variables";
@import "bootstrap_and_overrides/bootstrap";
@import "bootstrap_and_overrides/overrides";

您的JavaScript资产上的bootstrap.js示例。有了这个，您可以选择加载的内容，而不是：

//= require bootstrap/util
//= require bootstrap/alert
//= require bootstrap/button
// require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
// require bootstrap/modal
// require bootstrap/scrollspy
//= require bootstrap/tab
//= require bootstrap/tooltip
//= require bootstrap/popover

您的样式表资产中的bootstrap.scss示例：

// Core variables and mixins
//@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
// Core CSS
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/animation";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
//@import "bootstrap/input-group";
//@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
//@import "bootstrap/jumbotron";
@import "bootstrap/alert";
@import "bootstrap/progress";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/responsive-embed";
@import "bootstrap/close";
// Components w/ JavaScript
//@import "bootstrap/modal";
@import "bootstrap/tooltip";
@import "bootstrap/popover";
//@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/utilities-background";
@import "bootstrap/utilities-spacing";
@import "bootstrap/utilities-responsive";

这两个文件只是Bootstrap Gem的复制版本。variables.scss也是Bootstrap GEM的标准变量文件。我认为这是将Bootstrap纳入您的Rails项目的最佳方法，并完全控制了什么和不加载。

您忘了用分号终止您的最后一次导入。

/*
 *= require_self
 *= require_tree .
 *= require jquery-ui
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme';
html {
    background-image: url(/assets/tile.jpg);
    background-repeat: repeat;
    background-position: left top;
}