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文件。

OR

更理想的是，（我将采用的方法）根据不同的html或body类进行CSS切换，只需更改类。它不会增加太多开销，在更改主题时它将是一个更理想的用户体验。

Answer 2

您需要使用combination of webpacks style-loader and file-loader（第二个示例）并使用require.ensure（第二个示例＆＃34;动态导入＆＃34;）来实现此目的：

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。

使用Webpack加载css时如何切换css文件？

2 个答案: