Webpack dynamically replace url in scss while loading/Resolving

Question

I'm currently working on an Angular 4 project using Webpack.

I'd like to be able to customize my app main colors.

All my components SCSS files import a file named color.scss containing colors variables.

@import "src/assets/sass/color";

I have two files:

I'd like to tell webpack to replace this url when resolving, depending on a parameter I pass.

Therefore, when I execute:

webpack-dev-server --env.custom=A

Webpack would change all the imports of color.scss to "src/custom/A/assets/sass/color".

Is it possible ? If it is, how can it be implemented ?

Can you @import "src/custom/A/assets/sass/color"; inside src/assets/sass/_color.scss then rebuild? — hayden
Yes but I cannot see how this would help. variables defined in the custom file are overriden by what it's defined in the main file. — Salah Elgo
the default and custom SCSS have the same structure (set of variables). Only their values change. When moving the import at the bottom, It works. My app has the custom colors. But still, how can I tell webpack to add the import at the bottom of "src/assets/sass/color.scss" ? — Salah Elgo

hayden hayden · Accepted Answer · 2018-01-03T11:09:58

At the bottom of src/assets/sass/_color.scss

add @import "src/custom/A/assets/sass/color";

Then change A to when you want to swap colors.