使用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 文件。 您需要创建多个入口点来创建多个 CSS 文件。

或

更理想的是，（我将采用的方法）使您的 CSS 切换基于不同的 html 或 body 类，只需更改该类即可。 它不会增加太多开销，并且在更改主题时会成为更理想的 UX。

Answer 2

您需要结合使用webpacks style-loader和file-loader （第二个示例）并使用require.ensure （第二个示例“动态导入”）来完成此操作：

function switchTheme(name) {
    // Remove the current theme stylesheet
    // Note: it is important that your theme css always is the last
    // <link/> tag within the <head/>
    $('head link[rel="stylesheet"]').last().remove();

    // Since webpack needs all filePaths at build-time
    // you can't dynamically build the filePath
    switch(name) {
        case 'red':
            // With require.ensure, it is possible to tell webpack
            // to only load the module (css) when require is actually called
            return require.ensure([], function () {
                require('style-loader/url!file-loader!styles/themes/red.css');
            });
        case 'yellow':
            return require.ensure([], function () {
                require('style-loader/url!file-loader!styles/themes/yellow.css');
            });
        case 'blue':
            return require.ensure([], function () {
                require('style-loader/url!file-loader!styles/themes/blue.css');
            });
        default:
            throw new Error('Unknown theme "' + name + '"');
    }
}

然后像switchTheme('blue')这样的调用应该可以解决问题。

你可能需要检查你当前的webpack.config.js ，以防你已经为.css文件配置了一个加载器。