Extract multiple css files to different directories - css

Question

I'm trying to compile some sass files and extract each one to multiple paths.
Example:
resources/home/a.scss -> public/home/a.css
resources/home/layout/b.scss -> public/home/layout/b.scss
resources/login/c.scss -> public/login/c.css
At the moment I'm using this config and it bundles every scss file:
const path = require("path")
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// Context is an absolute path to the directory where webpack will be
// looking for our entry points.
context: path.resolve(process.cwd(), 'resources/assets'),
entry:
[
'./sass/app/home/a.scss',
'./sass/app/home/layout/b.scss',
'./sass/app/login/c.scss',
],
output: {
path: __dirname,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.(scss)$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
]
},
plugins: [
new ExtractTextPlugin({ filename: '[name].css', allChunks: true })
]
}

Answer 1

I think the problem is you are using an Array as the entry, which means that all of the dependencies (in this case the different css files, are added into the same output file).
You should change it to:
entry: {
a: './sass/app/home/a.scss',
b: './sass/app/home/layout/b.scss',
c: './sass/app/login/c.scss'
}
You can read more here https://webpack.js.org/concepts/entry-points/#object-syntax