Rails 5, Sass::SyntaxError cannot precompile assets

Question

I have started a new project ( Rails 5.0.0.1 && ruby 2.3.1p112 ) and can't seem to get the assets to precompile. My current structure looks like this.

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

app/assets/stylesheets/application.scss

*
*= require_tree .
*= require font-awesome
*= require style
*= require_self
*/

app/assets/stylesheets/style.scss

@import "bootstrap-sprockets";
@import "bootstrap";

// shared styling
@import 'shared/variables';
@import 'shared/content';
...
...

app/views/layout/application.html.haml

...
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
...

inside my app/assets/stylesheets/helpers/_varibles.scss file I have set some varibles

$font-family-standard: 'Arial', sans-serif;
$font-family-default: 'Open Sans', 'Arial', sans-serif;

$color-primary: #ff7e5b;
$color-gray: #898989;
$color-dark: #292c33;
$color-darker: #3f4248;

But when I run rails server / try running bundle exec rake assets:precompile I get this:

be rake assets:precompile
rake aborted!
Sass::SyntaxError: Undefined variable: "$color-dark".
/Users/Nexus/Personal/Projects/Rubyfuza/rubyfuza/app/assets/stylesheets/helpers/_content.scss:3
/Users/Nexus/.rbenv/versions/2.3.1/bin/bundle:23:in `load'
/Users/Nexus/.rbenv/versions/2.3.1/bin/bundle:23:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

I have no idea what is going on here. Any help will be much appreciated.

Answer 1

You are using $color-dark variable in app/assets/stylesheets/helpers/_content.scss:3 which is not defined

You need to import it in _content.scss

@import 'shared/variables'

Answer 2

You have to remove

= require_tree .

from

/*
*
*= require_tree .
*= require font-awesome
*= require style
*= require_self
*/

present in app/assets/stylesheets/application.scss because the asset pipeline goes on to compile each file present in stylesheet directory, resulting in need for having the @import directive for including variables partial which is default behaviour of sass. But you can prevent that if you do the said above.