Question

我正在使用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;
}

我想添加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 "{"

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

Answer 1

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

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

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的标准变量文件。我认为这是将引导程序包含到rails项目中的最佳方法，可以完全控制要加载的内容和不加载的内容。

Answer 2

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

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

在application.css.scss文件中包含bootstrap的正确方法是什么？

2 个答案: