I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment.
For example:
- If the
envis set to development, then the color should be green. - If the
envis set to production, then the color should be blue.
So far, I have been focusing on the sass-loader and trying to pass data, but it hasn't worked. The $env variable is always undefined when I run npm run build:Debug, which runs
webpack --app=all --env=developmentThese are the files I currently 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) {
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 => {
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 => {
appConfig.mode = "development";
appConfig.devtool = "inline-source-map";
});
break;
default:
case "production":
config.forEach(appConfig => {
appConfig.mode = "production";
appConfig.devtool = "cheap-source-map";
});
break;
}
return config;
};webpack.common.config.js - this file 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: {
limit: 8000,
name: "images/[name].[ext]"
}
}
]
},
{
test: /\.(svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 80000,
name: "images/[name].[ext]"
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: [
{
loader: "url-loader",
options: {
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 pass SCSS variables from the webpack config or any other method that allows me to generate different CSS based on the environment?