How to include ember addon's scss files directly into consuming app

TL;DR

How to import scss files from ember addon to consumers app(should import scss files and not processed css file, scss should be processed in consumer's app instead).

Details:

I am developing an addon and I am using sass for design, I want to let my users configure css properties from addon. For this I want to import scss files directly into the consumers app(I don't want them to use already compiled to css file that would go to vendor.css file) and override some of the variable's value.

Here is the plan on how it should work:

I have a configuration scss file, which has several variables I want to be configurable, user can override these variables by first including their own configuration scss file and our scss file below that(more details on how scss variables can be made overridable and are overriden).

The file structure for addon/styles is as follows:

I have imported all css files inside addon.scss as follows:

@import 'config';
@import 'helpers';
@import 'normalize';
@import 'base';
@import 'utilities';
@import 'modules';
@import 'datetime-picker';
@import 'fontawesome';
@import 'animation';
@import 'states';

The values I want my user to override are in _config.scss. Part of my _config.scss file looks like this:

$header-font: $font-sans !default;
$header-font-size: $small-font-size !default;
$header-font-type: normal !default;

I want user to provide their own value for variables like $header-font,$header-font-size and include before scss from my addon is included.

Ember version: 1.13.3