I want to have my app use 2 separate css files (at the same time), generated from different files (1 from scss
files, and one from less
files); both file names should be hashed.
I currently have webpack configured to generate 2 css files; however, in dev mode, Electrode isn't consuming the second, and in prod mode, Electrode isn't consuming the first. The generated isomorphic loader file lists both (within the "main" chunk).
It appears the output into index.html
gets generated in electrode-react-webapp/lib/default-handlers.js:65-68, which results in a single <link>
tag. So I think I'm going about this wrong.
I'm on electrode-react-webapp: ^2.0.0
with 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();
This was not possible prior to Electrode React Webapp #715, released in v2.2.0.
A couple small improvements to sample code provided in the PR:
Don't add the second item in entry
in webpack config (instead use import
within your app)
// /config/utils/chunk-selector.js
module.exports = () => {
const css = process.env.NODE_ENV === 'production'
? [
'app',
'third-party-something',
]
: [];
return: {
css,
js: 'app',
};
};
This allows the second bundle to work with a style-loader
fallback in dev mode.