javascript - 使用 React 和 SCSS 实现无样式内容的 Flash

Question

将 CSS 文件迁移到 SCSS 后，我可以在第一次加载时(每次重新加载页面后)看到布局元素的 FOUC。

我猜这与我的 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'