[vue-loader] extractCSS: true requires extract-text-webpack-plugin

Question

目前使用webpack4
所以把extract-text-webpack-plugin替换为mini-css-extract-plugin以后，打包报错
[vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency

现在的we’b’pack.config.client和server配置为

请问老师这是什么造成的？

Answer 1

Jokcy 2018-12-19 21:12:11

你用的vue-loader是什么版本，新的vue-loader配置会有些区别

https://vue-loader.vuejs.org/zh/guide/extract-css.html

• 提问者 qq_mk3_0 #1

  现在装的vue-loader还是v14版本
  
  我猜是run build命令后，webpack.config.base.js调用vue-loader.config.js时，extractCSS: !isDev判断为true，才导致要求我必须有extract-text-webpack-plugin这个东西
  v14的文档也写着默认依赖extract-text-webpack-plugin
  
  所以我试着去改写vue-loader.config.js
  给extractCSS这个属性加一个判断，build时extractCSS取我定义的MiniCssExtractPlugin配置，结果也不行，我估摸着v14版本根本不支持MiniCssExtractPlugin？？？
  但v15版本，也就是最新的，根本没有extractCSS这属性了，那我配置又要如何改？
  
  以上都是我猜的，请老师指点，下面是我目前vue-loader.config.js的配置。
  
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  const MiniPlugin = new MiniCssExtractPlugin({
    filename: '[name].[chunkhash:9].css',
    chunkFilename: '[id].css'
  })
  
  module.exports = isDev => {
    return {
      preserveWhitepace: true,
      extractCSS: !isDev ? MiniPlugin : false,
      cssModules: {
        localIdentName: isDev
          ? '[path]-[name]-[hash:base64:5]'
          : '[hash:base64:5]',
        camelCase: true
      }
      // hotReload: false, // 根据环境变量生成
    }
  }

• 提问者 qq_mk3_0 #2

  回复居然没有排版了，望老师耐心看完，谢谢。

• 提问者 qq_mk3_0 #3

  刚才我估摸着，既然stylus已经在webpack的client和server配置里额外写过处理步骤，那我可以不自定义extractCSS，build命令时直接交给外部的stylus配置来处理，就试了一下，然后顺利build至少不报红，最后run start了一下，目前看页面能访问而且功能正常，点击login才把另一个js文件请求过来。那问题似乎解决了?

点开查看后面1条评论