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

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

尽管在所有浏览器中都可以正常工作,但是在加载应用程序时可以看到FOUC(未样式化内容的闪烁)。

是因为CSS文件动态注入(inject)到 header 中而所有webpack模块加载的方式,还是我在webpack配置中做错了?

这是webpack配置-加载程序部分的代码段:
{
    test: /\.scss$/,
    loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ]
}

尽管这不会引起任何副作用,但是如果避免的话会更好。

谢谢。

最佳答案

现在,您的样式已烘焙到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。

10-05 20:34
查看更多