reactjs, getting sperated css output using webpack ExtractTextPlugin

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