使用mini-css-extract-plugin服务端报错document is not defined

[maxlasting]

最近使用 webpack 4 配置 ssr 环境，发现一个奇怪的问题：

当使用 mini-css-extract-plugin 这个插件的时候，如果 在 vue-router 中配置 动态加载的形式

export default [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "index" */ '../views/index.vue')
  },
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login.vue')
  }
]

那么只要在其中人一个.vue文件中中写 css 样式，那么在访问页面的时候就会报错：document is not defined

打开 vue-ssr-server-bundle.json 文件发现 有很多地方使用了 document

于是 就尝试着换回 extract-text-webpack-plugin@4.0.0，但是又出现，打包的时候会生成一个 manifest 的空 css 文件，不知如何解决。

我使用的是自己配置的环境，地址在 https://github.com/Maxlasting/vue-ssr-template

请问，能否给一个 基于 webpack 4 的 ssr 示例，或者帮我解决一下上面的问题，非常感谢。

[qa1057]

I also encounter the same problem. How to solve it is good? Online wait

[yekver]

Here is the the successful solution of the same problem: Akryum/vue-cli-plugin-ssr@806418e

[ilyavaiser]

This is very actual problem

[maxlasting]

已经找到解决办法了： use null-loader

webpack-contrib/mini-css-extract-plugin#90

[BODhaha]

请问你解决了吗？

[lsycxyj]

I met another problem with mini-css-extract-plugin. See this comment

Do you guys have any solutions?

[Zousdie]

我参考了 Akryum/vue-cli-plugin-ssr@806418e，但会出现另一个问题，如果异步引入的.vue文件中包含了样式，那么最终生成的html中，内联的style与通过link引入的css样式会重复

[Zousdie]

I found solution from this comment

Use css-loader/locals instead of css-loader, and delete extract-css-loader and MiniCssExtractPlugin

css-loader/locals will not inject the css file at server, so will not appear inline style

[Sherryer]

和 style-loader 冲突 去掉 style-loader 即可

[dongqudamage]

请问有具体代码么

[dongqudamage]

我使用第三方css也会报错

[sdhhqb]

Met samilar situation , use null-loader solve my problem.

{
  test: /\.scss$/,
  use: [
    'null-loader'
  ]
}

At first I use vue-style-loader in webpack.server.config，the error was gone. But cause a new problem, the css rule duplicated.