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

Question

老师，我在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

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

非常感谢~

Answer 1

Jokcy 2018-04-05 09:55:15

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

• 提问者 DavidXu1985 #1

  非常感谢！

• Jokcy 回复 提问者 DavidXu1985 #2

  用extract plugin

Answer 2

慕侠3851047 2018-07-23 14:34:50

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")
  ]
}

Answer 3

Jokcy 2018-04-06 07:17:45

对的。

Answer 4

提问者 DavidXu1985 2018-04-05 22:49:39

老师所说的extract plugin是指：

extract-text-webpack-plugin

使用如上插件实现CSS的提取吗？

Answer 5

提问者 DavidXu1985 2018-04-05 11:16:20

那老师，您说的把CSS提取出来是什么意思？