rendering css by environment

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

Your question is not clear enough. Do you want three different builds each having a different theme or do you want to build a build where you can switch/change themes in your running app? — Legends, Jun 18 '18 at 10:39
I have 3 different css files and I use razor to decide which one to include, but I'd like webpack to do that going forward and rely less on razor — Eman, Jun 18 '18 at 19:24
Ok, that's different from the provided answer, will update it to cover your comment. — Legends, Jun 18 '18 at 19:27
I've explained it using a theme switcher example, but in your case I would prefer a server side solution... — Legends, Jun 18 '18 at 19:54
If you still have a problem, you can create a little git repo (MVC solution) and a description with your problem, I will take a look... — Legends, Jun 18 '18 at 19:59

Legends · Accepted Answer · 2018-06-18T19:53:24.040

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"

rendering css by environment

1 Answers1