2016-10-27 6 views
1

Итак, я создаю приложение & Я добавил драгоценный камень bootstrap-sass. Вот что мой Gemfile выглядит следующим образом:Контейнер для Rails css не тянет в другие таблицы стилей.

gem 'rails', '4.2.6' 
gem 'bootstrap-sass' 
gem 'sass-rails', '~> 5.0' 
gem 'uglifier', '>= 1.3.0' 
gem 'coffee-rails', '~> 4.1.0' 
gem 'jquery-rails' 
gem 'turbolinks' 
gem 'jbuilder', '~> 2.0' 
gem 'bcrypt', '~> 3.1.7' 

group :development, :test do 
    gem 'byebug' 
    gem 'sqlite3', '1.3.11' 
end 

group :development do 
    gem 'web-console', '~> 2.0' 
    gem 'spring' 
end 

group :production do 
    gem 'pg' 
end 

Я моя папка маршруты:

Rails.application.routes.draw do 
    root 'landing_page#home' 
    get 'users/new' 
end 

И у меня есть две таблицы стилей application.scss & landing_page.scss.

Я просто пытаюсь создать свою целевую страницу. Тем не менее, я не могу получить ни один из стилей из моего landing_page.scss для загрузки. Я могу получить эти стили только при размещении в application.scss.

Вот application.scss

@import "bootstrap-sprockets"; 
@import "bootstrap"; 
/* 
* 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 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 styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require_tree . 
*= require_self 
*/ 


@mixin box_sizing { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

.debug_dump { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 45px; 
    @include box_sizing; 
} 

body{ 
    background-color: #525252; 
} 

Каждый знает, что я делаю неправильно? Почему это sass или просто css не применяется при помещении в landing_page.scss?

ответ

2

Вы хотите @import частично в файл sass. См. http://sass-lang.com/guide, чтобы узнать, как работают частичные операции.

В вашем случае вы должны переименовать landing_page.scss в _landing_page.scss и сделать @import landing_page в файле application.scss.

+0

Я определенно понимаю, как работают частичные функции, и теперь мое приложение работает надлежащим образом, так что спасибо вам большое! Меня интересует, почему эта таблица стилей должна быть импортирована, я думал, что она была первоначально частью конвейера активов. Или это из-за реализации sass? – Nappstir

+0

вы спрашиваете, почему 'landing_page.scss' не включается вместе с' application.scss'? – kasperite

+1

Звездочка (или конвейер активов) считывает файлы манифеста для создания одного файла css или js. По умолчанию файл манифеста - application.css или application.scss. Из-за этого вам нужно импортировать (или включать) другие фрагменты css для их обработки. См. Http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives. Отвечает ли он на ваш вопрос? – kasperite