关于CSS文件无法添加的后续

来源：3-9 将服务端渲染用于生产环境

DavidXu1985

2018-04-05

老师，我在webpack.base.js中添加了如下配置：

{

test: /\.css$/,

use: [ 'to-string-loader', 'css-loader' ]

}

然后使用npm run dev:client可以看到正确的效果，不过使用npm run dev:server后出现错误：

server-entry.js:830

return window && document && document.all && !window.atob;

ReferenceError: window is not defined

想问下老师这个问题怎么解决比较好？

非常感谢~

写回答

5回答

Jokcy

2018-04-05

已采纳

在服务端的webpack里面不要使用style loader，因为有dom操作。把css提取出来

Jokcy

DavidXu1985

用extract plugin

2018-04-05

共2条回复

慕侠3851047

2018-07-23

https://github.com/webpack-contrib/extract-text-webpack-plugin

github 上说的不支持 webpack v4，需要使用 mini-css-extract-plugin 替代
Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugininstead.

https://github.com/webpack-contrib/mini-css-extract-plugin

按照官方示例写的最简单的使用

module.exports = {
  output: {
    path: paths.appBuild,
    publicPath: '/public/' // paths.publicPath, // 静态资源文件引用时的路径
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
  {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin("styles.css")
  ]
}