我正在构建一个 spree 商店，一切都在开发中，但是当我尝试使用 git push heroku master 推送到生产环境时，我收到以下错误:
rake aborted!
Sass::SyntaxError: Undefined variable: "$c_blue".
(in /tmp/build_1a624a4f-adf9-4627-a2ce-22692ef03d87/app/assets/stylesheets/spree/fancy/shared
/_layout.scss:2)
我正在使用名为 spree_fancy 的自定义主题:https://github.com/spree/spree_fancy
这是我的variable.css.scss 文件:
/*--------------------------------------*/
/* Colors
/*--------------------------------------*/
$c_green: #8dba53 !default; /* Spree green */
$c_red: #e45353 !default; /* Error red */
$c_blue: #50A2F3 !default;
$c_orange: #ff9600 !default;
$layout_background_color: #FFFFFF !default;
$title_text_color: #404042 !default;
$body_text_color: #919191 !default;
$link_text_color: #61a1f0 !default;
$product_background_color: #FFFFFF !default;
$product_title_text_color: #404042 !default;
$product_body_text_color: #404042 !default;
$product_link_text_color: #BBBBBB !default;
/* -------------------------------------------- */
/* Load "Open Sans" font from Google Fonts
/* -------------------------------------------- */
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600);
/*--------------------------------------*/
/* Font families
/*--------------------------------------*/
$ff_base: 'Open Sans', sans-serif !default;
/*--------------------------------------
| Font sizes
|--------------------------------------
|- Navigation
| */
$header_navigation_font_size: 16px !default;
$horizontal_navigation_font_size: 16px !default;
$main_navigation_header_font_size: 16px !default;
$main_navigation_font_size: 14px !default;
/*|------------------------------------
|- Product Listing
| */
$product_list_name_font_size: 14px !default;
$product_list_price_font_size: 16px !default;
$product_list_header_font_size: 20px !default;
$product_list_search_font_size: 16px !default;
/*|------------------------------------
|- Product Details
| */
$product_detail_name_font_size: 24px !default;
$product_detail_description_font_size: 16px !default;
$product_detail_price_font_size: 20px !default;
$product_detail_title_font_size: 16px !default;
/*|------------------------------------
|- Basic
| */
$heading_font_size: 24px !default;
$sub_heading_font_size: 16px !default;
$button_font_size: 12px !default;
$input_box_font_size: 13px !default;
$base_font_size: 16px !default;
$border_color: lighten($body_text_color, 30) !default;
$default_border: 1px solid $border_color !default;
$button_border_color: rgba(0, 138, 189, .75) !default;
$table_head_color: lighten($body_text_color, 60) !default;
这是我的 _layout.scss 文件
body {
border-top: 5px solid $c_blue;
padding-top: 10px;
line-height: 24px;
}
.page-wrapper {
float: right;
width: 100%;
@include transition-duration(0.2s);
}
.hidden { display: none }
#logo {
margin-top: 10px;
}
#welcome-message {
text-align: center;
margin-top: 20px;
h1 {
font-weight: 400;
color: $body_text_color;
a {
color: $c_orange;
&:hover {
color: $c_green !important;
}
}
}
}
#latest-products {
h3 { color: $c_orange }
hr { border-bottom-color: lighten($c_orange, 40) }
.product-image a { border-color: lighten($c_orange, 40) }
.product-name { color: $c_orange !important; }
.bx-pager.bx-default-pager a.active,
.bx-pager.bx-default-pager a:hover {
background-color: $c_orange !important;
}
}
#featured-products {
h3 { color: $c_blue }
hr { border-bottom-color: lighten($c_blue, 30) }
.product-image a { border-color: lighten($c_blue, 30) }
.bx-pager.bx-default-pager a.active,
.bx-pager.bx-default-pager a:hover {
background-color: $c_blue !important;
}
}
#latest-products, #featured-products {
margin: 40px 0 ;
text-align: center;
.bx-wrapper {
margin-top: 40px;
.bx-controls {
bottom: inherit;
top: -35px;
}
}
h3 {
text-align: center;
font-weight: 400;
display: inline-block;
padding: 0 20px;
width: auto;
background-color: white;
border: none;
position: relative;
z-index: 1;
}
hr {
position: relative;
z-index: 0;
margin-top: -15px;
border-bottom-width: 2px;
}
ul {
margin-top: 30px;
}
.product-image {
a {
@include border-radius(165px);
border-width: 2px;
width: 160px;
height: 160px;
}
img {
@include border-radius(45px);
}
}
}
#sidebar {
margin-bottom: 30px;
}
ul#products {
max-width: 600px;
}
ul#products li {
margin-bottom: 20px;
a.info {
height: inherit;
font-weight: 400;
color: $c_green;
}
.price {
font-size: 24px;
}
.product-image {
border: none;
min-height: 155px;
padding: 0;
a {
border-color: lighten($c_blue, 30);
border-width: 2px;
padding: 30px 22px 30px 20px;
float: none;
img {
@include border-radius(0);
}
}
}
}
#wrapper {
margin-top: 30px;
}
#sidebar_products_search {
.filter-title {
color: $c_blue;
border-color: lighten($c_blue, 30);
}
.filter_choices {
font-size: 14px;
list-style: none;
}
}
.taxons-list {
margin-bottom: 40px;
}
footer#footer {
@include single-box-shadow(darken($c_blue, 10), 0, 0, 15px, 0, true);
// background: image-url("spree/fancy/footer-bg.png") repeat center;
background-color: lighten($c_blue, 5);
margin-top: 30px;
border-top: 5px solid lighten($c_blue, 30);
padding-top: 30px;
font-size: 14px;
line-height: 24px;
&, a, h5 {
color: white;
}
a:hover {
color: lighten($c_green, 30) !important;
}
h5 {
text-transform: uppercase;
line-height: 52px;
margin-bottom: 23px;
font-size: 17px;
}
p {
padding-top: 0;
}
ul {
list-style: none;
li {
}
}
}
这是我的 fancy.scss 文件:
/*
= require jquery-ui-1.9.2.custom
= require jquery.bxslider
= require icons
= require icons-codes
*/
@import 'compass';
@import 'compass/css3';
@import 'spree/fancy/variables';
@import 'spree/fancy/variables_override';
@import 'spree/fancy/shared/typography';
@import 'spree/fancy/shared/forms';
@import 'spree/fancy/shared/layout';
@import 'spree/fancy/shared/tables';
@import 'spree/fancy/components/slider';
@import 'spree/fancy/components/product_item';
@import 'spree/fancy/components/search';
@import 'spree/fancy/components/cart';
@import 'spree/fancy/components/breadcrumbs';
@import 'spree/fancy/components/variants';
@import 'spree/fancy/components/messages';
@import 'spree/fancy/components/navigation';
@import 'spree/fancy/components/pagination';
@import 'spree/fancy/sections/checkout';
@import 'spree/fancy/sections/cart';
@import 'spree/fancy/sections/user';
@import 'spree/fancy/sections/contact_us';
@import 'spree/fancy/shared/media';
/*----- These are the static pages below --------*/
@import 'spree/fancy/components/pages/about';
@import 'spree/fancy/components/pages/contact';
@import 'spree/fancy/components/pages/distribution';
@import 'spree/fancy/components/pages/faq';
@import 'spree/fancy/components/pages/manufacturers';
@import 'spree/fancy/components/pages/pickup';
@import 'spree/fancy/components/pages/returns';
@import 'spree/fancy/components/pages/services';
@import 'spree/fancy/components/pages/shipping';
@import 'spree/fancy/components/pages/suppliers';
我注意到的一件奇怪的事情是，在我的 fancy.scss 文件中，有一行写着 @import 'compass/css3';看起来与该文件中的其余部分有点不同。 css3 中的 3 是紫色的，而该文件中的所有其余代码都是白色的。该导入可能由于某种原因无法正常工作吗？
对于正在发生的事情还有其他想法吗？
这是我的 Gemfile.lock
GIT
remote: git://github.com/spree/spree_fancy.git
revision: bdeaeb9ced29a4e3204d8bc9988b57808b5a71d8
branch: 2-2-stable
specs:
spree_fancy (1.3.0)
compass-rails
deface (~> 1.0.0rc3)
jquery-ui-rails
spree_core (~> 2.2)
GIT
remote: https://github.com/spree/spree_auth_devise.git
revision: 81a0fbb2db15efbbb50d0d139bbc41aee7fa58a1
branch: 2-2-stable
specs:
spree_auth_devise (2.2.0)
cancan (~> 1.6.10)
devise (~> 3.2.3)
devise-encryptable (= 0.1.2)
json
multi_json
spree_core (~> 2.2.0)
GIT
remote: https://github.com/spree/spree_gateway.git
revision: ea9dd046848523c79845abbd5462f5e13941276e
branch: 2-2-stable
specs:
spree_gateway (2.2.1)
spree_core (~> 2.2.0)
GEM
remote: https://rubygems.org/
specs:
actionmailer (4.0.5)
actionpack (= 4.0.5)
mail (~> 2.5.4)
actionpack (4.0.5)
activesupport (= 4.0.5)
builder (~> 3.1.0)
erubis (~> 2.7.0)
rack (~> 1.5.2)
rack-test (~> 0.6.2)
active_utils (2.2.1)
activesupport (>= 2.3.11)
i18n
activemerchant (1.42.9)
active_utils (~> 2.0, >= 2.0.1)
activesupport (>= 2.3.14, < 5.0.0)
builder (>= 2.1.2, < 4.0.0)
i18n (~> 0.5)
json (~> 1.7)
money (< 7.0.0)
nokogiri (~> 1.4)
activemodel (4.0.5)
activesupport (= 4.0.5)
builder (~> 3.1.0)
activerecord (4.0.5)
activemodel (= 4.0.5)
activerecord-deprecated_finders (~> 1.0.2)
activesupport (= 4.0.5)
arel (~> 4.0.0)
activerecord-deprecated_finders (1.0.3)
activesupport (4.0.5)
i18n (~> 0.6, >= 0.6.9)
minitest (~> 4.2)
multi_json (~> 1.3)
thread_safe (~> 0.1)
tzinfo (~> 0.3.37)
acts_as_list (0.3.0)
activerecord (>= 3.0)
arel (4.0.2)
awesome_nested_set (3.0.0.rc.5)
activerecord (>= 4.0.0, < 5)
aws-sdk (1.27.0)
json (~> 1.4)
nokogiri (>= 1.4.4)
uuidtools (~> 2.1)
bcrypt (3.1.7-x86-mingw32)
builder (3.1.4)
cancan (1.6.10)
canonical-rails (0.0.7)
rails (>= 3.1, < 5.0)
chunky_png (1.3.1)
climate_control (0.0.3)
activesupport (>= 3.0)
cocaine (0.5.4)
climate_control (>= 0.0.3, < 1.0)
coffee-rails (4.0.1)
coffee-script (>= 2.2.0)
railties (>= 4.0.0, < 5.0)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.7.0)
colorize (0.7.3)
compass (0.12.6)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.2.19)
compass-rails (1.1.7)
compass (>= 0.12.2)
sprockets (<= 2.11.0)
deface (1.0.0)
colorize (>= 0.5.8)
nokogiri (~> 1.6.0)
rails (>= 3.1)
devise (3.2.4)
bcrypt (~> 3.0)
orm_adapter (~> 0.1)
railties (>= 3.2.6, < 5)
thread_safe (~> 0.1)
warden (~> 1.2.3)
devise-encryptable (0.1.2)
devise (>= 2.1.0)
erubis (2.7.0)
execjs (2.2.0)
ffaker (1.24.0)
font-awesome-rails (4.1.0.0)
railties (>= 3.2, < 5.0)
friendly_id (5.0.3)
activerecord (>= 4.0.0)
fssm (0.2.10)
highline (1.6.21)
hike (1.2.3)
httparty (0.13.1)
json (~> 1.8)
multi_xml (>= 0.5.2)
i18n (0.6.9)
jbuilder (1.5.3)
activesupport (>= 3.0.0)
multi_json (>= 1.2.0)
jquery-rails (3.1.1)
railties (>= 3.0, < 5.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (4.1.2)
railties (>= 3.1.0)
json (1.8.1)
kaminari (0.15.1)
actionpack (>= 3.0.0)
activesupport (>= 3.0.0)
mail (2.5.4)
mime-types (~> 1.16)
treetop (~> 1.4.8)
mime-types (1.25.1)
mini_portile (0.6.0)
minitest (4.7.5)
monetize (0.3.0)
money (~> 6.1.0.beta1)
money (6.1.1)
i18n (~> 0.6.4)
multi_json (1.10.1)
multi_xml (0.5.5)
nokogiri (1.6.2.1-x86-mingw32)
mini_portile (= 0.6.0)
orm_adapter (0.5.0)
paperclip (3.4.2)
activemodel (>= 3.0.0)
activerecord (>= 3.0.0)
activesupport (>= 3.0.0)
cocaine (~> 0.5.0)
mime-types
paranoia (2.0.2)
activerecord (~> 4.0)
pg (0.15.1-x86-mingw32)
polyamorous (0.6.4)
activerecord (>= 3.0)
polyglot (0.3.5)
rabl (0.9.3)
activesupport (>= 2.3.14)
rack (1.5.2)
rack-test (0.6.2)
rack (>= 1.0)
rails (4.0.5)
actionmailer (= 4.0.5)
actionpack (= 4.0.5)
activerecord (= 4.0.5)
activesupport (= 4.0.5)
bundler (>= 1.3.0, < 2.0)
railties (= 4.0.5)
sprockets-rails (~> 2.0.0)
rails_12factor (0.0.2)
rails_serve_static_assets
rails_stdout_logging
rails_serve_static_assets (0.0.2)
rails_stdout_logging (0.0.3)
railties (4.0.5)
actionpack (= 4.0.5)
activesupport (= 4.0.5)
rake (>= 0.8.7)
thor (>= 0.18.1, < 2.0)
rake (10.3.2)
ransack (1.1.0)
actionpack (>= 3.0)
activerecord (>= 3.0)
polyamorous (~> 0.6.0)
rdoc (4.1.1)
json (~> 1.4)
sass (3.2.19)
sass-rails (4.0.3)
railties (>= 4.0.0, < 5.0)
sass (~> 3.2.0)
sprockets (~> 2.8, <= 2.11.0)
sprockets-rails (~> 2.0)
sdoc (0.4.0)
json (~> 1.8)
rdoc (~> 4.0, < 5.0)
select2-rails (3.4.9)
sass-rails
thor (~> 0.14)
spree (2.2.2)
spree_api (= 2.2.2)
spree_backend (= 2.2.2)
spree_cmd (= 2.2.2)
spree_core (= 2.2.2)
spree_frontend (= 2.2.2)
spree_sample (= 2.2.2)
spree_api (2.2.2)
rabl (= 0.9.3)
spree_core (= 2.2.2)
versioncake (~> 1.2.0)
spree_backend (2.2.2)
jquery-rails (~> 3.1.0)
jquery-ui-rails (~> 4.1.0)
select2-rails (~> 3.4.7)
spree_api (= 2.2.2)
spree_core (= 2.2.2)
spree_cmd (2.2.2)
thor (~> 0.14)
spree_core (2.2.2)
activemerchant (~> 1.42.3)
acts_as_list (= 0.3.0)
awesome_nested_set (~> 3.0.0.rc.3)
aws-sdk (= 1.27.0)
cancan (~> 1.6.10)
deface (~> 1.0.0)
ffaker (~> 1.16)
font-awesome-rails (~> 4.0)
friendly_id (= 5.0.3)
highline (~> 1.6.18)
httparty (~> 0.11)
json (~> 1.7)
kaminari (~> 0.15.0)
monetize
paperclip (~> 3.4.1)
paranoia (~> 2.0)
rails (~> 4.0.5)
ransack (~> 1.1.0)
state_machine (= 1.2.0)
stringex (~> 1.5.1)
truncate_html (= 0.9.2)
spree_frontend (2.2.2)
canonical-rails (~> 0.0.4)
jquery-rails (~> 3.1.0)
spree_api (= 2.2.2)
spree_core (= 2.2.2)
stringex (~> 1.5.1)
spree_sample (2.2.2)
spree_core (= 2.2.2)
sprockets (2.11.0)
hike (~> 1.2)
multi_json (~> 1.0)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
sprockets-rails (2.0.1)
actionpack (>= 3.0)
activesupport (>= 3.0)
sprockets (~> 2.8)
sqlite3 (1.3.9-x86-mingw32)
state_machine (1.2.0)
stringex (1.5.1)
thor (0.19.1)
thread_safe (0.3.4)
tilt (1.4.1)
treetop (1.4.15)
polyglot
polyglot (>= 0.3.1)
truncate_html (0.9.2)
turbolinks (2.2.2)
coffee-rails
tzinfo (0.3.39)
uglifier (2.5.1)
execjs (>= 0.3.0)
json (>= 1.8.0)
uuidtools (2.1.4)
versioncake (1.2.0)
actionpack (>= 3.2)
activesupport (>= 3.2)
railties (>= 3.2)
tzinfo
warden (1.2.3)
rack (>= 1.0)
PLATFORMS
x86-mingw32
DEPENDENCIES
coffee-rails (~> 4.0.0)
jbuilder (~> 1.2)
jquery-rails
pg
rails (= 4.0.5)
rails_12factor
sass-rails (~> 4.0.2)
sdoc
spree (= 2.2.2)
spree_auth_devise!
spree_fancy!
spree_gateway!
sqlite3
turbolinks
uglifier (>= 1.3.0)
这是我的 Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.5'
# Use sqlite3 as the database for Active Record
group :development do
gem 'sqlite3'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.2'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
gem 'spree', '2.2.2'
gem 'spree_gateway', :git => 'https://github.com/spree/spree_gateway.git', :branch => '2-2-stable'
gem 'spree_auth_devise', :git => 'https://github.com/spree/spree_auth_devise.git', :branch => '2-2-stable'
gem 'spree_fancy', :git => 'git://github.com/spree/spree_fancy.git', :branch => '2-2-stable'
最佳答案
好吧，我明白了。 问题出在您的 application.css 文件中。有一个来自 spree-fancy 元素问题的示例应用程序链接:
https://github.com/vike27/surplusmerchant2/blob/master/app/assets/stylesheets/application.css
查看 *= require_tree . 指令。这告诉 Sass gem 递归地要求所有子目录。它不是从 fancy.css 文件开始，而是从嵌套子目录开始。因此，它在使用任何变量的第一个文件上失败，因为尚未加载变量!
只需将 *= require_tree . 替换为 *= require ./spree/fancy 即可。
关于css - 耙子中止! Sass::SyntaxError: undefined variable : "$c_blue"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24500192/