Webpack 3 Bootstrap 4 Error #media - reactjs

Question

I am trying to use React, Typescript, Webpack 3 and Bootstrap 4 to create a basic working project. When I import bootstrap.css in main .tsx file I am getting error like Unexpected Symbol - # - in /node_modules/bootstrap/dist/css/bootstrap.css.
Below is my webpack.config.js file :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/app.tsx'
},
output: {
path: path.join(__dirname,'dist'),
filename: '[name].bundle.js'
},
watch:true,
resolve: {
extensions: ['.ts','.tsx','.js']
},
devServer: {
contentBase: path.join(__dirname,'dist'),
port: 3333
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['awesome-typescript-loader']
},
{
test: /.html$/,
use: ['raw-loader']
},
{
test: /\.json$/,
use: ['json-loader']
},
{
test: /\.(s)css$/,
exclude: /node_modules/,
use: ['css-loader','style-loader','sass-loader',{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
},]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
showErrors: true,
title: 'React TS Webpack App'
}),
]
}
And the below App.tsx file:
import 'bootstrap/dist/css/bootstrap.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Greet from './components/Greet';
const techStack = ['React','TypeScript','Webpack','Bootstrap'];
ReactDOM.render(<Greet techs={techStack}/>, document.getElementById('app'));
But I am getting the below error:
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */
| #media print {
| *,
| *::before,
# ./src/app.tsx 1:0-42
# multi (webpack)-dev-server/client?http://localhost:3333 ./src/app.tsx
Could anybody help me how to clear this error and make bootsrap and webpack work?

Answer 1

"Use" style-loader before css-loader...
use: ['style-loader','css-loader','sass-loader',{ ... }..]