reactjs，使用webpack ExtractTextPlugin获取特定css输出

希望有人有主意

我想要两个文件，一个用于移动设备，一个用于桌面/平板电脑。我还没有找到webpack的任何解决方案

目前，我在js代码中加入了css，如下所示：

import*as React from“React”；
从“react”导入{Component}；
要求（'./image.scss'）；

这是我当前的网页配置：

let path=require（“路径”）；
让webpack=require（“webpack”）；
让nodeExternals=require（“网页包节点外部”）；
让ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
const desktopCSS=新的ExtractTextPlugin({
文件名：“css/application desktop.min.css”，
allChunks：对
});
const mobileCSS=新的ExtractTextPlugin({
文件名：“css/application mobile.min.css”，
allChunks：对
});
module.exports=[
{
条目：'./src/client/client.tsx'，
输出：{
路径：_dirname+'/public/assets'，
文件名：“js/application.min.js”
},
模块：{
规则：[
{
测试：/\.tsx？$/,，
加载器：“ts加载器”，
排除：/node\u模块/
},
{
测试：/\.scss$/,，
包括：[
解析（uu dirname，'src/common/elements'）
],
用法：desktopCSS.extract({
使用：[
{
加载器：“css加载器”
}, {
加载器：“sass加载器”，
选项：{
数据：“$isWide:true；$isMobile:false；”
}
}]
})
},
{
测试：/\.scss$/,，
包括：[
解析（uu dirname，'src/common/elements'）
],
用途：mobileCSS.extract({
使用：[
{
加载器：“css加载器”
}, {
加载器：“sass加载器”，
选项：{
数据：“$isWide:false；$isMobile:true；”
}
}]
})
},
{
测试：/\（png | jpg | svg）$/，
加载器：“文件加载器？名称=[path][name]。[ext]&上下文=src/”
}
]
},
决心：{
扩展名：['.ts'、'.tsx'、'.js'、'.jsx'、'.scss'、'.png'、'.jpg'、'.svg']
},
插件：[
新的webpack.LoaderOptionsPlugin({
调试：正确
}),
桌面CSS，
移动通信
],
外部：[{
“反应”：“反应”，
“react-dom”：“react-dom”，
“react-redux”：“react-redux”，
“redux”：“redux”
}，'bowser'，nodeExternals（）]，
}
];

下面是一个示例scss文件：

@import.../../data/colors”；
.生物头
{
顶部
{
边框底部：2件纯色$color金色；
@如果美元是宽的
{
高度：105px；
}
@如果$isMobile
{
高度：70像素；
.element-icon.type-burger
{
顶部：17px；
左边距：20px；
}
.element-icon.type-logo
{
位置：绝对位置；
顶部：10px；
右：20px；
}
}
}
}

我想在sass文件中使用$isWide和$isMobile来分隔输出。但以目前的方式，我只得到一个文件application-desktop.min.css

有什么想法或其他/更好的方法吗？谢谢

问候

---

多编译器是一个临时文件。解决方法，但我不喜欢，因为它两次编译我的js文件MultiCompile是临时文件。解决方法，但我不喜欢，因为它要编译我的js文件两次