Проблема при использовании Bootstrap и LESS в проекте React, настроенном с помощью Webpack - PullRequest
Новая
       10

Проблема при использовании Bootstrap и LESS в проекте React, настроенном с помощью Webpack

0 голосов
/ 20 сентября 2018

Пожалуйста, обратитесь мои файлы для этого проекта.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я применяю некоторые пользовательские CSS (файлы LESS) к любому элементу, происходит следующее: сначала применяется моя начальная загрузка 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']
    }
};

Просто пишу мои CSS в файлы LESS.Вызов основного файла LESS и начальной загрузки css в index.js.Использование классов на div.

...