Webpack extractplugin / cssmodules mixed up

I'm working on a Laravel project and want the following setup:

• Laravel 5.6
• ReactJS
• Laravel mix 2.0
• React CSS Modules (4.7.2)

For CSS modules I write a .CSS file for every component, this is all working so far.

However the components are for the backend, and I want to use a SASS file for the frontend. I have the following directories:

resources > assets > backend > components
resources > assets > frontend > (sass/js/fonts)

I want to compile all the CSS of the components to:

public > css > backend > app.min.css

And want to compile the (frontend) SASS file to:

public > css > app.min.css

My mixpack configuration file looks as following:

let mix                 = require('laravel-mix');
let ExtractTextPlugin   = require('extract-text-webpack-plugin');
let LiveReloadPlugin    = require('webpack-livereload-plugin');
let path                = require('path');

mix.react('resources/assets/backend/js/app.js', 'public/dashboard_assets/js')
    .sass('resources/assets/frontend/sass/core.scss', 'css/app.min.css')
    .webpackConfig({
       module: {
           "rules": [
                {
                    "test": /\.css$/,
                    "loader": ExtractTextPlugin.extract({
                        "fallback": "style-loader",
                        "use": "css-loader?modules=true&localIdentName=[name]__[local]--[hash:base64:6]&minimize=true"
                    })
                }
            ]
       },
       "plugins": [
            new ExtractTextPlugin("css/backend/app.min.css"),
            new LiveReloadPlugin()
        ]
    });

The build is succesful, however everything from the backend-file/components ('css/backend/app.min.css') is also included in the frontend-file ('css/app.min.css')

I've tried multiple things by excluding/including directories but unfortunately that didn't work.

I hope I explained this clearly enough and provided enough information, if not please let me know.

Cheers.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2qRHCNi
via IFTTT