css-modules 服务器首次渲染问题

Question

现在出现的问题是样式需要等待javascript动态插入带html的header里

所以造成的问题就是页面首次进入的时候看到的就是只有html结构但没有css样式的页面

这显然非常致命, 当然我可以把样式都打包起来然后再硬插到html里面, 不是这就失去使用css-modules的意义了

请问css-modules这类库怎么配合服务器首次渲染呢?

Answer 1

如楼上所说，使用这个插件即可
webpack配置文件如下修改：

let ExtractTextPlugin = require('extract-text-webpack-plugin');

plugins:[
...
new ExtractTextPlugin('app.css')
]
...
{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('css-loader')
}

Answer 2

可以用 extract-text-webpack-plugin 把 css 提取出来。