Как переключить css файл при использовании Webpack для загрузки css?

Я использую gulp для компиляции моего sass файла в css файлы и ссылки на файл css в моем html. Переключатель темы поддержки проекта. Например, у меня есть 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 сейчас, есть ли у кого-нибудь решение?

Ответ 1

Ваш подход не нуждается в изменении. Просто используйте Extract Text, чтобы сохранить файлы CSS. Вам нужно сделать несколько точек ввода для создания нескольких файлов CSS.

ИЛИ

В идеале (подход, который я бы сделал) сделайте свой CSS-переключатель на основе другого класса html или body и просто измените класс. Это не добавит много накладных расходов, и это будет более идеальным UX при изменении тем.

Ответ 2

Вам понадобится сочетание веб-пакетов 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.