rendering css by environment - asp.net-mvc-4

Question

I'm looking to switch to webpack on an asp.net mvc website and there's 3 different environments of this website and each environment has their own color scheme (so people know what environment they're on) so I need a way to tell webpack which css file to load and when, but not sure how to go about that.
the end result is:
/asset/styles/style.dev.css
/asset/styles/style.debug.css
/asset/styles/style.prod.css

Answer 1

Update
For example you have a certain theme enabled by default and you have a theme switcher control (layout page) which raises events client-side using JavaScript.
In your entry script you can attach to the changed event of the theme switcher control and do:
Dummy code: Index.js
function changedEventHandler(){
var selectedTheme = $(this).selectedValue;
switch (selectedTheme) {
case "themeA":
require("themeA")
break;
case "themeB":
require("themeB")
break;
default:
require("defaultTheme")
}
}
webpack.config.js
resolve: {
alias: {
"theme$": path.resolve(theme),
"themeA$": path.resolve("./src/css/themeA.css"),
"themeB$": path.resolve("./src/css/themeB.css"),
...
If you want three different builds each with a different theme, you can do the following:
If you want a build with themeA run: npm run themeA
If you want a build with themeB run: npm run themeB
package.json
"scripts": {
"themeA": "webpack --env.theme=themeA --mode development",
"themeB": "webpack --env.theme=themeB --mode development",
webpack.config.js
module.exports = (env) => {
var theme = "";
if (env.theme) {
theme = "./src/css/" + env.theme + ".css"
}
console.log(path.resolve(theme));
return {
entry: './src/index.js',
output: {
path: distfolder,
filename: 'bundle.js'
},
resolve: {
alias: {
"theme$": path.resolve(theme)
}
},
...
..
.
In your entry point you can do:
index.js
import "theme"