2 different css bundles based on folder location (compiled from less \w webpack) -

we developing webapplication custom cms dashboard in react.

our basic folder structure looks this:

src   -client     -app       -less        ...     -cms       -less        ...    -server -webpack-config     -development        -client.js        -server.js     -production 

what trying achieve sounds simple: struggling getting work.

the less-files in app/less && cms/less should each bundled seperate css file.

this way can load correct css file based on main component gets loaded in react (app / cms dashboard ). styling our cms totally different our app.

our current webpack config client:

var path  = require('path'); var webpack  = require('webpack'); var htmlwebpackplugin = require('html-webpack-plugin'); var extracttextplugin = require('extract-text-webpack-plugin'); var htmlcompressionplugin = require('html-compression-webpack-        plugin');  module.exports = {     cache: true,     entry: path.resolve(__dirname, '../../src/client/index.js'),     devtool: 'eval',     output: {         path: path.resolve(__dirname, '../../build/public'),         pathinfo: true,         filename: 'client.js',         publicpath: "/"     },      module: {         rules: [         {             test: /\.js$/,              exclude: path.resolve(__dirname, '../../node_modules'),             use: [{                 loader: 'babel-loader?cachedirectory=true',                 options: {                     "babelrc": false,                     "presets": [                     ["es2015",{"modules": false}],                     "react",                     "stage-0"                     ],                     "plugins": [                     "transform-react-constant-elements",                     "transform-react-inline-elements",                     "transform-react-remove-prop-types"                     ],                     "compact": false                 }             }]         },         {             test: /\.less$/,             loader: extracttextplugin.extract({                 notextractloader: "style-loader",                 loader: "css-loader?sourcemap?minimize!less-loader?   sourcemap",                 publicpath: "/"             })         },         {             test: /\.(gif|png|jpe?g)$/i,             use: 'url-loader?limit=50000'         }         ]     },     plugins: [     new webpack.optimize.uglifyjsplugin({         compress: {             warnings: false,             screw_ie8: false,             conditionals: false,             unused: false,             comparisons: false,             sequences: false,             dead_code: false,             evaluate: false,             if_return: false,             join_vars: false         },         output: {             comments: true         },         sourcemap: true     }),     new webpack.defineplugin({         'process.env': {             'node_env': '"development"'         }     }),new htmlwebpackplugin({                template: path.resolve(__dirname,       '../../src/client/app/public/index.html'),         inject: 'body',         filename: 'index.html',         hash: false,         cache: true,         minify: {},         alwayswritetodisk: true     }),     new extracttextplugin("[contenthash].css"),     new htmlcompressionplugin({         deleteoriginals: false,         assetsrelativeoutputdirectory: '../../build/public',         minratio: 1     })     ] } 

any tips , welcome: in advance!

to generate multiple bundles css files, can create js file requires css files , add inside entry property of wepack config. after can use extracttextwebpackplugin generate single css files. see so answer code.