在 netlify css 上部署失败 ./node_modules/gatsby/node_modules/css-loader答案

【问题标题】：Deploy failed on netlify css ./node_modules/gatsby/node_modules/css-loader在 netlify css 上部署失败 ./node_modules/gatsby/node_modules/css-loader
【发布时间】：2020-05-09 15:23:52
【问题描述】：

我在部署 netlify 时遇到问题，一些我不明白的冲突。我尝试清除缓存、重建基础、重建软件包、在 netlify 上重新部署、重新安装 mini-CSS-extract-plugin。

调试 Netlify：

11:38:12 AM：警告块样式 [mini-css-extract-plugin] 11:38:12 AM：冲突的顺序。添加了以下模块：上午 11:38:12： * css ./node_modules/gatsby/node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/typeface-roboto/index .css 11:38:12 AM：尽管它无法满足所需的订单这些模块：上午 11:38:12：* css ./node_modules/gatsby/node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/typeface-montserrat/index.css 11:38:12 AM：-无法满足所需的块组顺序组件---src-pages-404-js

这是什么意思以及如何解决？

    "css-loader": {
  "version": "3.4.2",
  "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
  "integrity": "sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==",
  "requires": {
    "camelcase": "^5.3.1",
    "cssesc": "^3.0.0",
    "icss-utils": "^4.1.1",
    "loader-utils": "^1.2.3",
    "normalize-path": "^3.0.0",
    "postcss": "^7.0.23",
    "postcss-modules-extract-imports": "^2.0.0",
    "postcss-modules-local-by-default": "^3.0.2",
    "postcss-modules-scope": "^2.1.1",
    "postcss-modules-values": "^3.0.0",
    "postcss-value-parser": "^4.0.2",
    "schema-utils": "^2.6.0"
  }
},
    "mini-css-extract-plugin": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
      "integrity": "sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==",
      "requires": {
        "loader-utils": "^1.1.0",
        "normalize-url": "1.9.1",
        "schema-utils": "^1.0.0",
        "webpack-sources": "^1.1.0"
      }
    },

【问题讨论】：

标签： css json deployment gatsby netlify

【解决方案1】：

由于 webpack 配置，这些警告是错误的顺序导入 CSS 模块。您可以通过在 gatsby-node.js 中添加以下 sn-p 来删除它们：

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-javascript') {
    const config = getConfig()
    const miniCssExtractPlugin = config.plugins.find(
      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    )
    if (miniCssExtractPlugin) {
      miniCssExtractPlugin.options.ignoreOrder = true
    }
    actions.replaceWebpackConfig(config)
  }
}

【讨论】：