Pass webpack (environment) variable to scss file

Very new to webpack... I would like to be able to read a value, in this case specifically the value of env from webpack.config.js in a sass file, so I can have different css based on environment.

For example:

env = development, colour = green
env = production, colour = blue

So far I have focoused on sass-loader, trying to pass data, but has not worked, the $env variable is always undefined when i run npm run build:Debug (this runs webpack --app=all --env=development).

These are the files I have:

webpack.config.js

const path = require("path");
const common = require("./.webpack/webpack.common.config");

const config = [];

function addAppConfig(app) {
    app.module = common.module;
    app.resolve = common.resolve;
    config.push(app);
}

module.exports = (env, argv) => {
    switch (argv.app) {
    // Add new configs to below
    case "a":
        addAppConfig(aa);
        break;

    case "b":
        addAppConfig(bb);
        break;

    case "c":
        addAppConfig(cc);
        break;
        
    default:
    case "all":
        addAppConfig(xyz);
    }

    switch (env) {
    case "local":
        config.forEach(appConfig => {
            // The "development" mode configuration option tells webpack to use its built-in development optimizations
            // https://webpack.js.org/configuration/mode/#mode-development
            appConfig.mode = "development";
            appConfig.output.path = path.resolve(__dirname, "../dist");
            appConfig.output.publicPath = "http://localhost:3000/dist";
            appConfig.devtool = "inline-source-map";
            appConfig.devServer = {
                contentBase: path.resolve(__dirname, "./public"),
                port: "3000",
                watchContentBase: true
            };
        });

        break;

    case "development":
        config.forEach(appConfig => {
            // The "development" mode configuration option tells webpack to use its built-in development optimizations
            // https://webpack.js.org/configuration/mode/#mode-development
            appConfig.mode = "development";
            appConfig.devtool = "inline-source-map";
        });

        break;

    default:
    case "production":
        config.forEach(appConfig => {
            // The "production" mode configuration option tells webpack to use its built-in production optimizations including minification etc.
            // https://webpack.js.org/configuration/mode/#mode-production
            appConfig.mode = "production";
            appConfig.devtool = "cheap-source-map";
        });

        break;
    }

    return config;
};

webpack.common.config.js - this is used in webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(s*)css$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].css"
                        }
                    },
                    "extract-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|jp(e*)g)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            // Convert images < 8kb to base64 strings
                            limit: 8000,
                            name: "images/[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.(svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            // 80kb limit to avoid an IE11 display bug
                            limit: 80000,
                            name: "images/[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            // Convert images < 8kb to base64 strings
                            limit: 8000,
                            name: "fonts/[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    }
};

and finally: document.scss

.aside__left, .aside__right {
    @if $env == 'development' {
        background-color: red; 
      } @else {
        background-color: green;
      }
      background-color: $desiredColor;
}

Is there a way to have scss variable mapping/passing from webpack config, or any other way that based on environment, there would be different css generated?

Solution

You can pass variable from webpack config to scss file with the following method:

{
    loader: "sass-loader",
    options: {
        data: "$var1: " + yourVar1+ ";"
    }
}