add scss (bootstrap) compilation with output css file in react project - reactjs

Question

I have a react/express project
I want to be able to customize the Bootstrap 4 and output a CSS file which will contain the customized boostrap.css.
I have npm installed the loaders bootstrap needs ( postcss-loader,sass-loader,style-loader etc), although in web I saw an example with ExtractTextPlugin in order to get output file
when I run the webpack config I get an error
" throw new Error("'output.filename' is required, either in config file or as --output-filename");"
Any tutorial/help how to accomplish compiling customized bootstrap in seperate output file?
webpack config
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//root file for the client/browser app
entry: './src/client/client.js',
//output file and its location
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'public'),
},
//run babel for every filename
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets:
[
'react',
'stage-0',
[
'env',
{
targets:
{
browsers:
['last 2 versions']
}
}
]
]
}
}
]
},
};
module.exports = {
// root file for the client/browser app
entry: './src/client/styles/main.scss',
// output file and its location
output: {
filename: 'styles2.css',
path: path.resolve(__dirname,'public'),
},
module: {
loaders: [
// ...
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true,
})
]
};

Answer 1

You need to remove the extra module.exports. I do not see the need to have two of these as you can simply achieve the same thing inside a single module.exports.
You can achieve this like so:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//root file for the client/browser app
entry: [
'./src/client/client.js',
'./src/client/styles/main.scss'
],
//output file and its location
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'public'),
},
//run babel for every filename
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets:[
'react',
'stage-0',
[
'env',
{
targets:
{
browsers:
['last 2 versions']
}
}
]
]
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css-loader!sass-loader')
}
],
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true,
})
]
},};