如何使用 Electrode.io 拥有多个 css 文件答案

【问题标题】：How to have multiple css files with Electrode.io如何使用 Electrode.io 拥有多个 css 文件
【发布时间】：2018-01-31 22:54:14
【问题描述】：

我想让我的应用程序使用 2 个单独的 css 文件（同时），它们由不同的文件生成（1 个来自 scss 文件，一个来自 less 文件）；两个文件名都应该被散列。

我目前已将 webpack 配置为生成 2 个 css 文件；然而，在开发模式下，电极不消耗第二个，而在生产模式下，电极不消耗第一个。生成的同构加载器文件列出了两者（在“主”块中）。

看来index.html 的输出是在electrode-react-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();

【问题讨论】：

标签： javascript webpack walmart-electrode

【解决方案1】：

在 v2.2.0 中发布的 Electrode React Webapp #715 之前，这是不可能的。

对 PR 中提供的示例代码进行了一些小改进：

不要在 webpack 配置中的 entry 中添加第二项（而是在您的应用中使用 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 后备。

【讨论】：