我想让我的应用程序使用 2 个单独的 css 文件(同时),它们是从不同的文件生成的(1 个来自 scss
文件,一个来自 less
文件);两个文件名都应该进行哈希处理。
我目前已将 webpack 配置为生成 2 个 css 文件;但是,在开发模式下,电极不会消耗第二个,而在生产模式下,电极不会消耗第一个。生成的同构加载程序文件列出了两者(在“主” block 内)。
输出显示为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();
最佳答案
在 Electrode React Webapp #715 之前这是不可能的,于v2.2.0发布。
对 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
后备。
关于javascript - 如何使用 Electrode.io 拥有多个 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48552792/