Undefined variable: $grey-darken-1

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Undefined variable: "$grey-darken-1"

crystal_wb asked 6 years ago

I have tried different ways of integrating MDB into my Rails app but the same error keeps appearing when I load any page:
Undefined variable: "$grey-darken-1".

I followed the 5 min quick start video here BootStrap 4 Tutorial first and got the error. It only stopped after I removed the SCSS folder. However, though that branch passed local tests, it errored due to timing out in Heroku's Circle CI tests. Every time I ran the CI tests they would go for 2 plus hours before erroring because of how long it took to run. All other branches run tests in 11 minutes or less.

So I decided to start over. I reuploaded the MDB pro folder (called MDB-Pro_4.5.14). Then I put the js folder inside my app's javascript folder. I put the css and scss folders inside my stylesheet folder. I put the other folders inside of the assets folder. The only thing I left out was the index.html. I used the index.html to copy the head tags and paste them in the head of my application.html.erb (inside the views/layout folder). I also copied the script tags at the bottom of the body in the index.html and pasted them at the bottom of the body in my application.html.

After that I commented out the old tags that were calling bootstrap and jquery. Here is what my head looks like:
<head>

<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"https://mdbcdn.b-cdn.net/analytics.min.js";var o=document.getElementsByTagName("script")[0];o.parentNode.insertBefore(n,o);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
analytics.load("1GIuQjMuAPEDdjGTDppwJ8Tnb6GVL5M1");
analytics.page();
}}();
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Upstate | Keep Up</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!--< %= csrf_meta_tags %>-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= favicon_link_tag 'https://mdbcdn.b-cdn.net/logo.png' %>
<!--<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script>-->
<!--<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>-->
<!--<link rel="stylesheet" type="text/css" href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css">-->
<!--</link>-->
<!--<meta name= "viewport" content="width=device-width, initial-scale=1">-->
</head>

(I tried using insert code, but it gave all my text code styling)

In the bottom of my body, under my nav bar is:
<div class="container">
<div class="col-0 col-lg-2"></div>
<div>
<!-- /Start your project here-->
<% if notice %>
<div id="notice" class="alert alert-primary alert-dismissible fade show" role="alert">
<%= notice %>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<% end %>
<% if alert %>
<p id="alert" class="alert alert-danger"><%= alert %></p>
<% end %>
<a name="top"></a>
<%= yield %>
<span id="to-top" class="btn btn-light text-secondary to-top">Back to Top</span>
</div>

</div>
<br>
<hr>
<footer class = "pl-3">
<p>You’re testing out our beta! Contact us with feedback and questions at <a href ="mailto:kelly@keepupstate.com" traget= "_blank">kelly@keepupstate.com</a></p>
</footer>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

After doing that I followed these instructions [GUIDE] MDBootstrap Integration with Ruby on Rails

But I still get the error.
This is what it says in the server console:

F, [2018-11-20T09:56:38.419440 #2140] FATAL -- : 
F, [2018-11-20T09:56:38.419591 #2140] FATAL -- : ActionView::Template::Error (Undefined variable: "$grey-darken-1".):
F, [2018-11-20T09:56:38.419972 #2140] FATAL -- : 19: <!-- Material Design Bootstrap -->
20: <link href="css/mdb.min.css" rel="stylesheet">
21: <!--< %= csrf_meta_tags %>-->
22: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
23: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
24: <%= favicon_link_tag 'https://mdbcdn.b-cdn.net/logo.png' %>
25: <!--<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>-->
F, [2018-11-20T09:56:38.420066 #2140] FATAL -- : 
F, [2018-11-20T09:56:38.420144 #2140] FATAL -- : app/assets/stylesheets/scss/addons-pro/_cards-extended.scss:175
app/views/layouts/application.html.erb:22:in `_app_views_layouts_application_html_erb___3332816638233831510_69822832952280'

Bartłomiej Malanowski staff pro premium answered 6 years ago

You cannot just import only cards-extended.scss. If you're a pro user, you should notice that we provide compiled version of cards-extended.css that already contain everything you need to make it work

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Cloud 9
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: Yes
  • Provided link: Yes
About author
crystal_wb
5Support score
1Questions 0Answers
0Snippets likes 0Snippets