SASS conditional imports based on env variables using webpack (to use different themes per environment)
05:18 28 Nov 2019

For my Vue website project using a single style sheet generated using Webpack from SASS I want to have:

Conditional SASS imports based on an env variable


EXAMPLE SETUP:

.env : So for instance if I have an env containing:

SASS_THEME="soft"

soft.scss : A SASS theme file containing something like:

$color-alpha: #e5e5e5;

main.scss : A main sass file looking something like:

// Import theme variables here
@import '${SASS_THEME}';

body{
    background: $color-alpha;
}
webpack sass environment-variables