Неопределенная переменная SASS

Question

Я пытался использовать http://startbootstrap.com/stylish-portfolio и после загрузки всех файлов и копирования в каталог я получаю следующую ошибку при частичном _bordered-pull:

ActionView::Template::Error (Undefined variable: "$fa-css-prefix".

Однако переменная определена, и я импортирую (или, по крайней мере, пытаюсь) частичное.

Мой каталог assets / stylesheets выглядит следующим образом:

--application.css.scss
--bootstrap.css.scss
--font-awesome.css.scss.erb
--stylish-portfolio.css.scss
--|font-awesome
  --_bordered-pulled.css.scss
  --...(other partials)
  --font-awesome.css.scss

Application.css.scss:

/*
 * 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

@import 'font-awesome/font-awesome';
@import 'bootstrap';
@import 'font-awesome';
@import 'stylish-portfolio';

Font-awesome.css.scss

/*!
 *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

_bordered-pulled.css.scss

// Bordered & Pulled
// -------------------------

.#{$fa-css-prefix}-border {
  padding: .2em .25em .15em;
  border: solid .08em $fa-border-color;
  border-radius: .1em;
}

.pull-right { float: right; }
.pull-left { float: left; }

.#{$fa-css-prefix} {
  &.pull-left { margin-right: .3em; }
  &.pull-right { margin-left: .3em; }
}

Это синтаксическая ошибка или я неправильно настроил конвейер активов?

_variable.css.scss https://github.com/IronSummitMedia/startbootstrap/blob/master/templates/stylish-portfolio/font-awesome/scss/_variables.scss

Answer 1

Вы должны сделать следующее:

Откройте файл font-awesome/less/variables.less вашего проекта или font-awesome/scss/_variables.scss и отредактируйте переменную @fa-font-path или $fa-font-path, чтобы она указывала на каталог шрифтов.

Источник: документация Fontawsome

http://fontawesome.io/get-started

Answer 2

Попробуйте проверить, как вы прекомпилируете ресурсы. Проверьте initializers/assets.rb (или это может быть environment /production.rb для вас), чтобы убедиться, что вы прекомпилируете ресурсы дружественным способом, например так:

config.assets.precompile += ["*.js", "*.scss", "*.jpg", "*.png"]

У меня была такая же ошибка, когда это было

config.assets.precompile += [/.*\.png/,/.*\.ico/,/.*\.jpg/,/.*\.js/,/.*\.scss/]