Question

我已经使用webpack捆绑了我的应用程序代码2.在我的主模块上使用了require语句来嵌入一个SCSS文件。

require('./styles/styles.scss');

虽然在所有浏览器中都可以正常工作，但在加载应用程序时可以看到FOUC（Flash Of Unstyled Content）。

是否所有webpack模块加载的方式都是因为CSS文件被动态注入头文件或我在webpack配置中做错了什么？

以下是webpack config - loader部分的片段：

{
    test: /\.scss$/,
    loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ]
}

虽然这不会引起任何副作用，但如果避免会更好。

感谢。

Answer 1

现在你的样式已融入JS文件中。在您的情况下，浏览器需要一段时间来解析javascript，并且只有在处理后才能将样式应用于页面。这导致了FOUC。

为了解决这个问题，我开发了ExtractTextPlugin。基本上它的作用是取出指定的css并将其放在一个单独的css文件中。基本配置如下：

const plugin = new ExtractTextPlugin({
  filename: '[name].[contenthash:8].css',
});

module: {
      rules: [ {
          test: /\.css$/,
          use: plugin.extract({
            use: 'css-loader',
            fallback: 'style-loader',
          })
       }]
},
plugins: [ plugin ]

如果您不使用html-webpack-plugin，则必须将生成的文件附加到HTML页面。通过链接生成的文件部分，您将摆脱FOUC。

在使用Webpack时，正在努力去除FOUC（Flash Of Unstyled Content）

1 个答案: