在我的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
})
]
};
希望有人找到解决方案并附上解释。