Error in rake app:assets:precompile when using a bootstrap sass variable in a rails engine

Question

I am working on a rails engine which includes bootstrap-sass. I am trying to use a bootstrap variable in my styles, but I'm getting an error. I am trying to follow the documentation here:
https://www.rubydoc.info/gems/bootstrap-sass/3.4.1

# test_engine.gemspec

# ...

  s.add_dependency "rails", ">= 5"
  s.add_dependency 'sassc-rails'
  s.add_dependency 'bootstrap-sass'
# ...

application.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 */

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

I've defined a manifest file for the dummy app where the rake task is running:
test/dummy/app/assets/config/manifest.js

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

And a manifest file for my engine:
app/assets/config/test_engine_manifest.js

//= link_directory ../javascripts/test_engine .js
//= link_directory ../stylesheets/test_engine .css

Here's the file where I'm trying to use the variable:

// _thing.scss

.thing {
  color: $brand-primary;
}

and the output from rake app:assets:precompile

> ❯❯❯ rake app:assets:precompile                                                                                                            

rake aborted!
SassC::SyntaxError: Error: Undefined variable: "$brand-primary".
        on line 2:10 of app/assets/stylesheets/test_engine/_thing.scss
>>   color: $brand-primary;

   ---------^

Shouldn't $brand-primary be defined by bootstrap? What am I missing?

Answer 1

in your application.scss file add this line

@import "bootstrap-variables";

hope this will work for you. Thank you.