Issue while using Bootstrap and LESS in React project configured with Webpack - css

Question

Please refer my files for this project.
The issue that I am facing is that when I apply some custom css (LESS file) to any element what happens is that first my bootstrap css gets applied and after a fraction of second my custom css gets applied.
I am able to see the lag.
For example, first my div is 100% width and after a lag I see my custom width of 300px getting applied.
index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter,
Route,
browserHistory,
Switch
} from 'react-router-dom';
import {
HomePage,
LoginPage,
SignupPage,
ForgotPasswordPage
} from './screens';
import {
Provider
} from 'react-redux';
import 'bootstrap/dist/css/bootstrap.min.css';
import './style/main.less';
import configureStore from './store';
const store = configureStore();
class App extends React.Component {
render() {
return (
<Provider store={store}>
<BrowserRouter history={browserHistory}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/register" component={SignupPage} />
<Route exact path="/forgot-password" component={ForgotPasswordPage} />
</Switch>
</BrowserRouter>
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
app: ['./src/index.js']
},
output: {
path: path.join(__dirname, './build'),
publicPath: '/',
filename: 'bundle.[name].[hash].js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'env', 'stage-1']
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader', options: {
sourceMap: true
}
}, {
loader: 'less-loader', options: {
sourceMap: true
}
}]
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.json']
}
};
Simply writing my css in LESS files. Calling the main LESS file and bootstrap css in the index.js. Using classes on the div.