Active Admin Editor not running - ruby

Question

I am trying to include an editor in an Active Admin setting.
I am able to bundle install every version of it up to 1.1.0, but when I run rails s and try to access the admin page I get the following error:
Sass::SyntaxError in Admin/keywords#index
Showing /Users/xxxxx/.rvm/gems/xxxxx/gems/activeadmin-0.6.0/app/views/active_admin/resource/index.html.arb where line #1 raised:
File to import not found or unreadable: ../functions/linear-gradient.
Load path: Sass::Rails::Importer(/Users/xxxxx/.rvm/gems/xxxxx/gems/active_admin_editor-1.0.5/app/assets/stylesheets/active_admin/editor.css.scss)
(in /Users/xxxxx/.rvm/gems/xxxxx/gems/active_admin_editor-1.0.5/app/assets/stylesheets/active_admin/editor.css.scss)
ActionView::Template::Error (File to import not found or unreadable: ../functions/linear-gradient.
Load path: Sass::Rails::Importer(/Users/xxxx/.rvm/gems/xxxx/gems/active_admin_editor-1.0.5/app/assets/stylesheets/active_admin/editor.css.scss)
(in /Users/xxxx/.rvm/gems/xxxx/gems/active_admin_editor-1.0.5/app/assets/stylesheets/active_admin/editor.css.scss)):
1: insert_tag renderer_for(:index)
bourbon (1.0.4) app/assets/stylesheets/css3/_background-image.scss:5
bourbon (1.0.4) app/assets/stylesheets/_bourbon.scss:9
activeadmin (0.6.0) app/assets/stylesheets/active_admin/mixins/_all.css.scss:11
activeadmin (0.6.0) app/assets/stylesheets/active_admin/_mixins.css.scss:1
active_admin_editor (1.0.5) app/assets/stylesheets/active_admin/editor.css.scss:1
sass (3.1.10) lib/sass/./sass/tree/import_node.rb:64:in `import'
sass (3.1.10) lib/sass/./sass/tree/import_node.rb:25:in `imported_file'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:147:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `send'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `map'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `send'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `map'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `send'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `map'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:144:in `visit_import'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `send'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:53:in `visit_children'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:53:in `map'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:53:in `visit_children'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:27:in `visit_children'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:39:in `with_environment'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:26:in `visit_children'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:47:in `visit_root'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `send'
sass (3.1.10) lib/sass/./sass/tree/visitors/base.rb:37:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:18:in `visit'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:7:in `send'
sass (3.1.10) lib/sass/./sass/tree/visitors/perform.rb:7:in `visit'
sass (3.1.10) lib/sass/./sass/tree/root_node.rb:20:in `render'
sass (3.1.10) lib/sass/./sass/engine.rb:300:in `_render'
sass (3.1.10) lib/sass/./sass/engine.rb:247:in `render'
sass-rails (3.2.6) lib/sass/rails/template_handlers.rb:106:in `evaluate'
tilt (1.4.1) lib/tilt/template.rb:103:in `render'
sprockets (2.1.4) lib/sprockets/context.rb:177:in `evaluate'
sprockets (2.1.4) lib/sprockets/context.rb:174:in `each'
sprockets (2.1.4) lib/sprockets/context.rb:174:in `evaluate'
sprockets (2.1.4) lib/sprockets/processed_asset.rb:12:in `initialize'
sprockets (2.1.4) lib/sprockets/base.rb:241:in `new'
sprockets (2.1.4) lib/sprockets/base.rb:241:in `build_asset'
sprockets (2.1.4) lib/sprockets/base.rb:262:in `circular_call_protection'
sprockets (2.1.4) lib/sprockets/base.rb:240:in `build_asset'
sprockets (2.1.4) lib/sprockets/index.rb:89:in `build_asset'
sprockets (2.1.4) lib/sprockets/caching.rb:19:in `cache_asset'
sprockets (2.1.4) lib/sprockets/index.rb:88:in `build_asset'
sprockets (2.1.4) lib/sprockets/base.rb:163:in `find_asset'
sprockets (2.1.4) lib/sprockets/index.rb:56:in `find_asset'
sprockets (2.1.4) lib/sprockets/bundled_asset.rb:16:in `initialize'
sprockets (2.1.4) lib/sprockets/base.rb:244:in `new'
sprockets (2.1.4) lib/sprockets/base.rb:244:in `build_asset'
sprockets (2.1.4) lib/sprockets/index.rb:89:in `build_asset'
sprockets (2.1.4) lib/sprockets/caching.rb:19:in `cache_asset'
sprockets (2.1.4) lib/sprockets/index.rb:88:in `build_asset'
sprockets (2.1.4) lib/sprockets/base.rb:163:in `find_asset'
sprockets (2.1.4) lib/sprockets/index.rb:56:in `find_asset'
sprockets (2.1.4) lib/sprockets/environment.rb:74:in `find_asset'
sprockets (2.1.4) lib/sprockets/base.rb:171:in `[]'
actionpack (3.2.5) lib/sprockets/helpers/rails_helper.rb:126:in `asset_for'
actionpack (3.2.5) lib/sprockets/helpers/rails_helper.rb:44:in `stylesheet_link_tag'
actionpack (3.2.5) lib/sprockets/helpers/rails_helper.rb:43:in `collect'
actionpack (3.2.5) lib/sprockets/helpers/rails_helper.rb:43:in `stylesheet_link_tag'
arbre (1.0.1) lib/arbre/element.rb:175:in `send'
arbre (1.0.1) lib/arbre/element.rb:175:in `method_missing'
activeadmin (0.6.0) lib/active_admin/views/pages/base.rb:27:in `build_active_admin_head'
activeadmin (0.6.0) lib/active_admin/views/pages/base.rb:26:in `each'
activeadmin (0.6.0) lib/active_admin/views/pages/base.rb:26:in `build_active_admin_head'
arbre (1.0.1) lib/arbre/context.rb:92:in `with_current_arbre_element'
arbre (1.0.1) lib/arbre/element/builder_methods.rb:49:in `within'
activeadmin (0.6.0) lib/active_admin/views/pages/base.rb:24:in `build_active_admin_head'
activeadmin (0.6.0) lib/active_admin/views/pages/base.rb:9:in `build'
arbre (1.0.1) lib/arbre/element/builder_methods.rb:30:in `build_tag'
arbre (1.0.1) lib/arbre/context.rb:92:in `with_current_arbre_element'
arbre (1.0.1) lib/arbre/element/builder_methods.rb:26:in `build_tag'
arbre (1.0.1) lib/arbre/element/builder_methods.rb:39:in `insert_tag'
activeadmin (0.6.0) app/views/active_admin/resource/index.html.arb:1:in `___sers__tephan__rvm_gems_ruby_______p____saftzine_gems_activeadmin_______app_views_active_admin_resource_index_html_arb___381976998_2302642480'
arbre (1.0.1) lib/arbre/context.rb:45:in `instance_eval'
arbre (1.0.1) lib/arbre/context.rb:45:in `initialize'
activeadmin (0.6.0) app/views/active_admin/resource/index.html.arb:1:in `new'
activeadmin (0.6.0) app/views/active_admin/resource/index.html.arb:1:in `___sers__tephan__rvm_gems_ruby_______p____saftzine_gems_activeadmin_______app_views_active_admin_resource_index_html_arb___381976998_2302642480'
actionpack (3.2.5) lib/action_view/template.rb:145:in `send'
actionpack (3.2.5) lib/action_view/template.rb:145:in `render'
activesupport (3.2.5) lib/active_support/notifications.rb:125:in `instrument'
actionpack (3.2.5) lib/action_view/template.rb:143:in `render'
.
.
.
The active-admin.css.scss is:
// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;
// Active Admin's got SASS!
#import "active_admin/mixins";
#import "active_admin/base";
// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
// body.active_admin {
// .status_tag { background: #6090DB; }
// }
//
// Notice that Active Admin CSS rules are nested within a
// 'body.active_admin' selector to prevent conflicts with
// other pages in the app. It is best to wrap your changes in a
// namespace so they are properly recognized. You have options
// if you e.g. want different styles for different namespaces:
//
// .active_admin applies to any Active Admin namespace
// .admin_namespace applies to the admin namespace (eg: /admin)
// .other_namespace applies to a custom namespace named other (eg: /other)
//= require active_admin/editor/wysiwyg
The only place I can find linear-gradient is in
Searching 482 files for "linear-gradient"
/Users/xxxxx/.rvm/gems/xxxxx/gems/activeadmin-0.6.0/app/assets/stylesheets/active_admin/mixins/_gradients.css.scss:
$secondary-gradient-start: #efefef !default;
$secondary-gradient-stop: #dfe1e2 !default;
#mixin gradient($start, $end){
background: $start;
background: -webkit-linear-gradient(-90deg, $start, $end);
background: -moz-linear-gradient(-90deg, $start, $end);
background: linear-gradient(-90deg, $start, $end);
// IE 6 & 7
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($end)}');
// IE 8
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($end)}');
}
#mixin primary-gradient {
#include gradient(lighten($primary-color, 5%), darken($primary-color, 7%));
border-bottom: 1px solid darken($primary-color, 11%);
}
#mixin secondary-gradient {
#include gradient($secondary-gradient-start, $secondary-gradient-stop);
}
#mixin highlight-gradient {
#include gradient(#75a1c2, #608cb4);
}
#mixin reverse-highlight-gradient {
#include gradient(#608cb4, #75a1c2);
}
#mixin no-gradient {
background: none;
// IE 6 & 7
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
// IE 8
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}
active_admin_editor-1.0.x/app/assets/stylesheets/active_admin/editor.css.scss starts with:
#import 'active_admin/mixins';
body form .html_editor {
.wrap {
width: 76%;
float: left;
}
.
.
.
Where am I missing something. How can I get this to work?

Answer 1

My guess is it is related to the removal of Bourbon or the removal of sass-rails. Re-adding one or both may resolve the issue.

Answer 2

Thanks to Piers C and some research on the AA GitHub I was able to find a solution to my problem.
The problem might be related to either Bourbon, SASS or the assets pipeline.
In my case I ended up
deleting #import "bourbon"; from
activeadmin-0.6.0/app/assets/stylesheets/mixins/_all.css.scss
adding a _box_shadow.css.scss mixin in the same folder and
importing it in _all.css.scss
editing the _gradient.css.scss mixin in AA
Now I have the following files:
activeadmin-0.6.0/app/assets/stylesheets/mixins/_all.css.scss
#import "active_admin/mixins/variables";
#import "active_admin/mixins/reset";
#import "active_admin/mixins/gradients";
#import "active_admin/mixins/shadows";
#import "active_admin/mixins/icons";
#import "active_admin/mixins/rounded";
#import "active_admin/mixins/buttons";
#import "active_admin/mixins/sections";
#import "active_admin/mixins/utilities";
#import "active_admin/mixins/typography";
#import "active_admin/mixins/box_shadow";
activeadmin-0.6.0/app/assets/stylesheets/mixins/_box_shadow.css.scss
#mixin box-shadow ($shadow-1,
$shadow-2: false, $shadow-3: false,
$shadow-4: false, $shadow-5: false,
$shadow-6: false, $shadow-7: false,
$shadow-8: false, $shadow-9: false)
{
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
-ms-box-shadow: $full;
-o-box-shadow: $full;
box-shadow: $full;
}
activeadmin-0.6.0/app/assets/stylesheets/mixins/_gradient.css.scss
$secondary-gradient-start: #efefef !default;
$secondary-gradient-stop: #dfe1e2 !default;
#mixin gradient($start, $end) {
background-color: $start;
background-image: unquote("linear-gradient(180deg, #{$start}, #{$end})");
}
#mixin primary-gradient {
#include gradient(lighten($primary-color, 5%), darken($primary-color, 7%));
border-bottom: 1px solid darken($primary-color, 11%);
}
#mixin secondary-gradient {
#include gradient($secondary-gradient-start, $secondary-gradient-stop);
}
#mixin highlight-gradient {
#include gradient(#75a1c2, #608cb4);
}
#mixin reverse-highlight-gradient {
#include gradient(#608cb4, #75a1c2);
}
#mixin no-gradient {
background-color: none;
}
I mention step three just for completeness, since I discovered later that I did not replicate this step in production, but that everything was working nevertheless.