如何在vue-cli生成的vue.config.js中设置mini-css-extract-plugin的配置

Question

我有一个相当大的Vue项目，它最初是用vue-cli创建的。在构建时，我收到了臭名昭著的“无法满足组块组的期望顺序”的警告。经过多次搜索，我认为解决方案是将ignoreOrder添加到mini-css-extract-plugin的初始配置选项中，但我不知道如何添加。我认为这应该在vue.config.js中完成。该文件的内容包括：

module.exports = {
  lintOnSave: false
}

我试过了：

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({ ignoreOrder: true })
    ]
  }
}

但这给了我一个错误，我认为这意味着模块被加载了两次。

我试过了：

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      ignoreOrder: true
    }
  }
}

但这给了我一个语法错误。

如何设置该选项？

Answer 1

根据document，您可以通过css.extract属性传递选项来传递min-css-extract-plugin的配置，如下所示：

// vue.config.js
module.exports = {
  // ...,
  css: {
    extract: {
      ignoreOrder: true
    },
  }
};