在我的 application.css.scss 文件中包含引导程序的正确方法是什么？答案

【问题标题】：What is the proper way to include bootstrap in my application.css.scss file?在我的 application.css.scss 文件中包含引导程序的正确方法是什么？
【发布时间】：2016-10-23 03:13:24
【问题描述】：

我使用的是 Rails 4.2.3。我有这个文件，app/assets/stylesheets/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;
}

我想添加引导程序，各种教程建议我添加“@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 "{"

在我的 application.css.scss 文件中包含引导指令的正确方法是什么？

【问题讨论】：

标签： ruby-on-rails-4 import sass bootstrap-modal

【解决方案1】：

您忘记用分号终止上次导入。

/*
 *= 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;
}

【讨论】：

【解决方案2】：

我个人更喜欢导入我所有的资产而不是 scss。

将引导 gem 添加到 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";

这两个文件只是从引导 gem 复制的版本。 variables.scss 也是 bootstrap gem 中的标准变量文件。我认为这是将引导程序包含在您的 Rails 项目中的最佳方式，可以完全控制要加载的内容和不加载的内容。

【讨论】：