Как иметь несколько CSS-файлов с Electrode.io

Question

Я хочу, чтобы мое приложение использовало 2 отдельных файла CSS (одновременно), сгенерированных из разных файлов (1 из scss файлы, и один из less файлы); оба имени файла должны быть хешированы.

В настоящее время у меня есть веб-пакет, настроенный для создания 2 CSS-файлов; однако в режиме разработки Electrode не потребляет второе, а в режиме prod Electrode не потребляет первое. Сгенерированный изоморфный файл загрузчика перечисляет оба (в пределах "основного" чанка).

Появляется вывод в index.html генерируется в electro-реагировать-webapp / lib / default-handlers.js: 65-68, что приводит к одному <link> тег. Так что я думаю, что поступаю неправильно.

Я на electrode-react-webapp: ^2.0.0 с webpack: ^3.0.0

const extractLess = new ExtractTextPlugin({
    allChunks: true,
    disable: isDev,
    filename: `semantic-ui${isDev ?  '' : '.[hash]'}.css`,
});

const extractSass = new ExtractTextPlugin({
    allChunks: true,
    disable: isDev,
    filename: `gemini${isBundling ? '[name]' : ''}${isDev ?  '' : '.[hash]'}.css`,
});

const lessRule = {
    test: /\.less$/,
    use: extractLess.extract({
        // …
    })
};

const sassRule = {
    test: /\.scss$/,
    use: extractSass.extract({
        // …
    })
};

// …

composer.addPartials([ // webpack-config-composer
    {
        'app-style': {
            config: {
                module: { rules: [ sassRule ] },
            },
        },
    },
    {
        'semantic-style': {
            config: {
                module: { rules: [ lessRule ] },
            },
        },
    },
]);

// register custom styles
const { _base } = composer.profiles;
const _extractStyle = _base.partials['_extract-style'];

_base.partials['app-style'] = { order: _extractStyle.order };
_base.partials['semantic-style'] = { order: _extractStyle.order };

delete _base.partials['_extract-style']; // `.enable = false` doesn't work

const config = compose();

Answer 1

Это было невозможно до выхода Electrode React Webapp # 715, выпущенного в версии 2.2.0.

Пара небольших улучшений для примера кода, представленного в PR:

Не добавляйте второй элемент в entry в конфиге webpack (вместо этого используйте import в вашем приложении)

// /config/utils/chunk-selector.js
module.exports = () => {
    const css = process.env.NODE_ENV === 'production'
        ? [
            'app',
            'third-party-something',
        ]
        : [];

    return: {
        css,
        js: 'app',
    };
};

Это позволяет второму комплекту работать с style-loader Откат в режиме разработки.