将 webpack（环境）变量传递给 scss 文件

我对webpack非常陌生...我想要能够从webpack.config.js中读取一个值，具体来说是从sass文件中读取env的值，这样我就可以根据环境生成不同的css。

例如：

• env = development，颜色 = 绿色
• env = production，颜色 = 蓝色

到目前为止，我一直在关注sass-loader，试图传递数据，但没有成功，当我运行npm run build:Debug时，$env变量始终为undefined（这会运行webpack --app=all --env=development）。

以下是我拥有的文件：

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) {
    // 在下面添加新的配置
    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 => {
            // "development"模式配置选项告诉webpack使用其内置的开发优化
            // 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 => {
            // "development"模式配置选项告诉webpack使用其内置的开发优化
            // https://webpack.js.org/configuration/mode/#mode-development
            appConfig.mode = "development";
            appConfig.devtool = "inline-source-map";
        });
        break;
    default:
    case "production":
        config.forEach(appConfig => {
            // "production"模式配置选项告诉webpack使用其内置的生产优化，包括缩小等
            // https://webpack.js.org/configuration/mode/#mode-production
            appConfig.mode = "production";
            appConfig.devtool = "cheap-source-map";
        });
        break;
    }
    return config;
};

webpack.common.config.js - 这在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: {
                            // 将大小小于8kb的图像转换为base64字符串
                            limit: 8000,
                            name: "images/[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.(svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            // 80kb限制以避免IE11的显示错误
                            limit: 80000,
                            name: "images/[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            // 将大小小于8kb的图像转换为base64字符串
                            limit: 8000,
                            name: "fonts/[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    }
};

最后：

document.scss

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

有没有办法从webpack配置中进行scss变量映射/传递，或者有没有其他方法根据环境生成不同的css？