How to switch css file when using Webpack to load css?

Question

I use gulp to compile my sass file to css files, and reference the css file in my html. The project support theme switch. For example, I have 3 css theme files:

• red.css
• yellow.css
• blue.css

I can currently switch the theme css like this:

var styleDom = $('#theme-style');
var newHref = 'styles/themes/' + themeName + '.css';
if (styleDom.attr('href') !== newHref) {
   styleDom.attr('href', newHref);
}

Now I want to use webpack to load the css file.

require('styles/themes/red.css');

It seems work well, but I cannot find a way to switch the theme css file now, does anyone have a solution?

Answer 1

Your approach doesn’t need to change. Just use Extract Text plugin to save out the CSS files. You’ll need to make multiple entry points to create multiple CSS files.

OR

More ideally, (the approach I would take) make your CSS switch based on a different html or body class and just change the class. It won’t add much overhead, and it will be a more ideal UX when changing themes.