将 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")
}
}
};
最佳答案
问题不是因为 Webpack。都是因为我傻:)
我在子组件中导入了 CSS 文件,因此当我重新加载页面时,它首先显示没有任何样式的布局,然后加载子组件并为布局提供正确的样式。所以基本上,我解决这个问题的唯一方法就是在布局组件中导入样式。
import '../style.scsc'
关于javascript - 使用 React 和 SCSS 实现无样式内容的 Flash,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60146992/