$map: #007bff is not a map for `map-has-key'

[PavanOnRails]

Using Rails 5.0.0 and trying to integrate gem 'materialize-sass', '~> 1.0.0.rc2' into my application, but the app broke with the below error

$map: #007bff is not a map for `map-has-key'

Steps:

1. Added gem 'materialize-sass', '~> 1.0.0.rc2' into Gemfile and done bundle install
2. Added

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

into my application.css.scss

3. Added //= require materialize-sprockets to application.js
4. Restarted the server and when the app loaded, it broke with that error

Any help is appreciated, TIA

[mkhairi]

hi @PavanOnRails, i'm using the same code in the demo, and suppose this works fine.. see: application.scss

maybe it clash with another scss file?

[PavanOnRails]

Hi @mkhairi Sorry for the late response. I'm sure its the problem with materialize content in the application.css.scss. I even checked by removing the materialize content from my application.css.scss and my app works fine.

[PavanOnRails]

I've updated the gem to 1.0.0 but the error persists. If I remove

$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;

from application.css.scss, I've a new error which says Invalid CSS after ".blue.": expected class name, was "#007bff"

[mkhairi]

@PavanOnRails, I'm pretty sure you are using with other CSS framework (eg: bootstrap) in your application.scss file. There is incompatibility issue if you multiple sass base framework sience they are using the same name sass mixins or function. Otherwise separate theme in different file.