Undefined mixin 'box-shadow' with Active Admin Editor

Question

I have a Rails 3.2 app using ActiveAdmin 1.0 and I'm using the active_admin_editor gem here.

Anytime I try to load the I get the error below. The front end loads fine and also if I remove the active_admin_editor gem, ActiveAdmin loads fine.

I've searched all over google & SO for a few days trying to figure out the answer.

Undefined mixin 'box-shadow' in /Library/Ruby/Gems/2.0.0/gems/active_admin_editor-1.1.0/app/assets/stylesheets/active_admin/editor.css.scss

Application.css.scss

*= require_self
*= require formtastic-bootstrap
*= require my_styles
*= require active_admin/editor/wysiwyg

My application layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--Latest minified Font Awesome CSS-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="/assets/my_styles-6077c0d3b7523ad80195404b9270b1ac.css" media="screen" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<meta content="authenticity_token" name="csrf-param" />
<meta content="" name="csrf-token" />
</head>
<body>
<script src="/assets/application-0c2344779e38105475d0e1be9a815723.js" type="text/javascript"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

box-shadow is a bootstrap mixin, are you sure you have bootstrap required before AA and that mixing are being called correctly? — TomDunning
@Isotope I think that may be the problem. I'm using the Bootstrap CDN for the css and the javascript, but I'm trying to figure out how to import it so that AA gets it since AA has it's own layout. — stiweb2003
create two different layouts, one for your application and the other for the AA backend — Babar
I had to use an old version of bourbon to make this working. gem 'bourbon', '3.2.4' — jvenezia

Tsuyoshi Asami Tsuyoshi Asami · Accepted Answer · 2015-01-17T07:22:10

Try to use active_admin_editor on github.

gem 'active_admin_editor', github: 'ejholmes/active_admin_editor'

Undefined mixin 'box-shadow' with Active Admin Editor

4 Answers