资产管道在我的 Rails 4.2 应用程序的“application.scss”中不起作用答案

【问题标题】：Assets pipeline doesn't work in 'application.scss' in my Rails 4.2 app资产管道在我的 Rails 4.2 应用程序的“application.scss”中不起作用
【发布时间】：2015-05-01 05:58:00
【问题描述】：

我是 Rails 的新手，如果这是一个愚蠢的问题，我深表歉意。但我无法解决我的问题：我将 Bootstrap 添加到我的新应用程序中，但它仍然没有使用任何新样式。

我已将 application.css 重命名为 application.scss 并创建了这样的结构：

|-stylesheets
   |-elements
   |--articles
   |---article.scss
   |-application.scss

Application.scss

/* User styles
* Plugins first
 */
@import "bootstrap-sprockets";
@import "bootstrap";

@import "elements/**/*";

/*
 * 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 */

在我添加的 Gem 文件中

source 'https://rubygems.org'
ruby '2.2.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2'

# Установка Bootstrap
gem 'sass-rails'
gem 'bootstrap-sass'
#Autoprefixer optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.
gem 'autoprefixer-rails'

Application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .

我尝试在 article.scss 中编写任何样式规则，但我的应用程序不使用它们，任何 Bootstrap 样式也是如此。

【问题讨论】：

尝试重命名文件：application.css.scss
感谢您的快速回答。但这无济于事
尝试指定 article.scss 的相对路径而不是 @import "elements/**/*";。有效吗？
已经完成。没用。它也没有解释为什么 Bootstrap 样式不起作用

标签： ruby-on-rails twitter-bootstrap sass ruby-on-rails-4.2 ruby-2.2

【解决方案1】：

有一个更简单的方法，我将描述顺序：添加gem 'bootstrap-sass' 做bundle install 后，重启服务器而不是添加config/application.rb下一个字符串：

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

对于您的图像，比在app/assets/stylesheets 中创建custom.css.scss 并添加@import "bootstrap";，在您的custom.css.scss 中，您可以编写自己的样式

【讨论】：

由于某种原因添加 custom.css.scss 文件没有帮助。我已经在我早期的应用程序中使用过这种方式，我使用 css 而不是 css.scss 并且它有效。但在这个应用程序中 - 它没有。

【解决方案2】：

我怀疑您的环境中有旧版本的引导程序。尝试使用 gem 'bootstrap-sass', '3.3.3' 更新您的 Gemfile 并运行 bundle。确保更新后重新启动服务器。

或者，您也可以运行 bundle update。

【讨论】：

在 bundle update 一些 gem 被更新后：Installing sass 3.4.13 (was 3.2.19) Installing jquery-rails 4.0.3 (was 3.1.2) Installing sass-rails 5.0.1 (was 4.0.5) 但我的应用程序仍然既不使用 Bootstrap 也不使用我自己的样式

【解决方案3】：

几个小时后我发现了一个问题 - 我的 pages_controller 不正确：

class PagesController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
end

代替：

class PagesController < ApplicationController
  def index_page
  end
end

控制器应该从主控制器继承！

附注：将字符串 layout "application" 添加到错误的控制器也有帮助：

class PagesController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
  layout "application"
end

但我不建议这样做

【讨论】：