Fla sh нестандартного содержимого с реагировать и scss

Question

После переноса моих CSS файлов в S CSS я вижу FOU C для моих элементов макета при первой загрузке (после каждой перезагрузки страницы).

Я думаю, что-то есть сделать с моей конфигурацией webpack, поэтому я попытался решить проблему с помощью mini- css -extract-plugin , но я все еще вижу проблему.

Вот содержимое моего webpack.config.js файла:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';


module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,{
            loader: "css-loader"
          }, {
            loader: "sass-loader",
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /(\.(?:le|c)ss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
            },
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: false,
              javascriptEnabled: true,
            },
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ]
      }
    ]
  },
  output: {
    publicPath: "/"
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin(),
    new MomentLocalesPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

Answer 1

Проблема не из-за Webpack. Это из-за моей глупости:)

Я импортировал файл CSS внутри дочернего компонента, поэтому при перезагрузке страницы сначала отображается макет без каких-либо стилей, а затем загружается дочерний компонент и дает макет правильный стиль. В общем, единственное, что я сделал для решения проблемы, это импортировал стиль в компоненте макета.

import '../style.scsc'