css - webpack加载css时如何切换css文件？

Question

我使用 gulp 将我的 sass 文件编译成 css 文件，并在我的 html 中引用 css 文件。该元素支持主题切换。比如我有3个css主题文件:

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

我目前可以像这样切换主题 css:

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

现在我想用webpack加载css文件。

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

看起来效果很好，但我现在找不到切换主题css文件的方法，有没有人有解决方案？

Answer 1

您的方法不需要改变。只需使用 Extract Text用于保存 CSS 文件的插件。你需要制作 multiple entry points创建多个 CSS 文件。

或

更理想的是，(我会采用的方法)让您的 CSS 切换基于不同的 html 或 body 类，并且只需更改类。它不会增加太多开销，并且在更改主题时将是更理想的用户体验。