2013-12-10 2 views
0

В моем приложении Rails. Это как мой файл custom.css.scss выглядит следующим образом:RoR SCSS/CSS вне функции

@import "bootstrap"; 

/* mixins, variables, etc. */ 

$grayMediumLight: #eaeaea; 

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



/* footer */ 

footer { 
    margin-top: 45px; 
    padding-top: 5px; 
    padding-right: 40px; 
    padding-left: 40px; 
    border-top: 1px solid $grayMediumLight; 
    color: $grayLight; 
    a { 
    color: $gray; 
    &:hover { 
     color: $grayDarker; 
    } 
    } 
    small { 
    float: left; 
    } 
    ul { 
    float: right; 
    list-style: none; 
    li { 
     float: left; 
     margin-left: 10px; 
    } 
    } 
} 

И у меня есть _footer.html.erb частичное здесь:

<footer class="footer"> 
    <small> 
    <a href="https://twitter.com/siaw23">Twitter:</a> 
    Siaw23 
    </small> 
    <nav> 
    <ul> 
     <li><a href="https://music.twitter.com/">Music :D</a></li> 
    </ul> 
    </nav> 
</footer> 

И мой application.html.erb так:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Kalendar</title> 
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 

<%= yield %> 
<%= render 'layouts/footer' %> 
</body> 
</html> 

У меня есть bootstrap в моем Gemfile, и я запустил bundle install, но эффект css не работает. Почему? Здесь можно использовать некоторую помощь.

Это как моя страница выглядит в настоящее время:

enter image description here

Это мой application.css

/* 
*= require_tree . 
*= require bootstrap 

*/ 
+0

Вы можете поделиться application.css? – muttonlamb

+0

@muttonlamb application.css пуст:/ – Emanuel

+0

Я добавил свой контент application.css – Emanuel

ответ

1

Предполагая, что вы установили самозагрузку камня или Добавив бутстраповских CSS файлов в активах или vender, вам все равно нужно сообщить рельсам, чтобы скомпилировать загрузочные ресурсы.

В вашем Application.css добавить требуют строки перед *= require_tree. С:

*= require bootstrap 

Вы можете сделать то же самое для других стилей, такие как * = требуется имя файла (опускают расширение файла, рельсы обнаружат его)

То же самое с JavaScript, но с немного другим синтаксисом

application.js

//= require bootstrap 
+0

мое приложение application.css выглядит так: '/ * * = require_tree. * = требуется бутстрап */' – Emanuel

+0

ничего не изменилось ... – Emanuel

0

Похоже, вы пытаетесь загрузить загрузочный материал, прежде чем он понадобится.

С конвейером активов в рельсах порядок загрузки важен, поскольку файлы упакованы и объединены.

Попробуйте поместить require tree . после того, как вам понадобится перезагрузка, это должно помочь обеспечить доступность содержимого и не перезаписывать его.

Иногда необходимо перезапустить сервер разработки при внесении этих изменений.

+0

ну это содержимое ' * = require_self * = требуется загрузочный файл * = require_tree. 'но ничего не меняет. – Emanuel

Смежные вопросы