在使用Webpack配置的React项目中使用Bootstrap和LESS时出现问题

Question

请参考我关于该项目的文件。

我面临的问题是，当我将自定义css（LESS文件）应用于任何元素时，发生的事情是先应用我的 bootstrap css ，然后我的自定义CSS会在不到一秒钟的时间内被应用

我能够看到时滞。

例如，首先我的div的宽度为100％，并且在滞后之后，我看到了300px的自定义宽度被应用。

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']
    }
};

只需在LESS文件中编写我的CSS。在index.js中调用主LESS文件并引导CSS。在div上使用类。