reactjs, getting sperated css output using webpack ExtractTextPlugin - css

Question

Hope someone has an idea.
I want to have two files, one for mobile and one for desktop/tablet. I haven't yet found any solution with webpack.
At the moment I include my css over the js-code like this:
import * as React from "react";
import {Component} from "react";
require('./image.scss');
And this is my current webpack config:
let path = require("path");
let webpack = require("webpack");
let nodeExternals = require("webpack-node-externals");
let ExtractTextPlugin = require('extract-text-webpack-plugin');
const desktopCSS = new ExtractTextPlugin({
filename: 'css/application-desktop.min.css',
allChunks: true
});
const mobileCSS = new ExtractTextPlugin({
filename: 'css/application-mobile.min.css',
allChunks: true
});
module.exports = [
{
entry: './src/client/Client.tsx',
output: {
path: __dirname + '/public/assets',
filename: 'js/application.min.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'src/common/elements')
],
use: desktopCSS.extract({
use: [
{
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
data: "$isWide: true;$isMobile: false;"
}
}]
})
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'src/common/elements')
],
use: mobileCSS.extract({
use: [
{
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
data: "$isWide: false;$isMobile: true;"
}
}]
})
},
{
test: /\.(png|jpg|svg)$/,
loader: 'file-loader?name=[path][name].[ext]&context=src/'
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.png', '.jpg', '.svg']
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
desktopCSS,
mobileCSS
],
externals: [{
'react': 'React',
'react-dom': 'ReactDOM',
'react-redux': 'ReactRedux',
'redux': 'Redux'
}, 'bowser', nodeExternals()],
}
];
here is a example scss file:
#import "../../data/colors";
.organism-header
{
.top
{
border-bottom: 2px solid $color-golden;
#if $isWide
{
height: 105px;
}
#if $isMobile
{
height: 70px;
.element-icon.type-burger
{
top: 17px;
margin-left: 20px;
}
.element-icon.type-logo
{
position: absolute;
top: 10px;
right: 20px;
}
}
}
}
I want to use $isWide and $isMobile inside my sass files to separate the output. But with the current way I only got one file application-desktop.min.css
Any Idea or a another/better way? Thanks!
Greetings
crazyx13th