Issue in configure the scss with bootstrap in react project - reactjs

Question

I am learning react and currently facing the issue in configuring the scss with bootstrap in a project, that was initially built by my friend and now I want to work on it. It works fine when I configure it for bootstrap. But when I try to configure the scss I have the following type error..
1)Here is the terminal error
ERROR in ./client/styles/styles.scss
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #import '~bootstrap/scss/bootstrap.scss';
| $btn-font-weight:bold;
|
# ./client/App.js 17:0-31
# ./client/main.js
# multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./client/main.js
2/ Here is my webpack.config file:
const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()
const config = {
name: "browser",
mode: "development",
devtool: 'eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.join(CURRENT_WORKING_DIR, 'client/main.js')
],
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
]
}, plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
module.exports = config
3)Here is my app.js file
import React from 'react'
import MainRouter from './MainRouter'
import {BrowserRouter} from 'react-router-dom'
import './styles/styles.scss';
import { hot } from 'react-hot-loader';
const App = () => (
<BrowserRouter>
<MuiThemeProvider>
<MainRouter/>
</MuiThemeProvider>
</BrowserRouter>
)
export default hot(module)(App)

Answer 1

To achieve expected result, use below option of using loaders in below format
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]