Reactjs服务器端渲染FOUC问题

时间:2016-09-13 21:04:26

标签: javascript css reactjs

在我的reactjs应用程序中实现服务器端渲染后,每当我的页面加载时,它都不会将样式应用于页面,直到从服务器加载js。这造成了一个FOUC问题。我尝试使用 extract-text-webpack-plugin ,但即使我的样式导出到不同的CSS文件中,我仍然无法使用,并且我已经在我的html文件中包含了导出的CSS文件。下面是我的webpack配置。

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: "inline-source-map",
  entry: ['webpack-hot-middleware/client', './app/js/index.js'
  ],
  module: {
  loaders: [
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
  },
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract("style-loader", "css-loader")
  },
  { test: /\.scss$/,
    loader: ExtractTextPlugin.extract('css!sass')
  }
 ]
},
output: {
  path: path.join(__dirname, "build"),
  filename: "index.min.js",
  publicPath: '/'
},

 plugins: [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),

  new ExtractTextPlugin("./src/app/style.css",{
   allChunks:false
 })
 ]
 };

希望有人找到解决方案并附上解释。

0 个答案:

没有答案