css - 在 netlify css ./node_modules/gatsby/node_modules/css-loader 上部署失败
问题描述
我在部署 netlify 时遇到问题,一些我不明白的冲突。我尝试清除缓存、重建基础、重建软件包、在 netlify 上重新部署、重新安装 mini-CSS-extract-plugin。
调试 Netlify:
上午 11:38:12:警告块样式 [mini-css-extract-plugin] 上午 11:38:12:冲突的顺序。添加了以下模块:上午 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:尽管无法使用这些模块完成所需的排序:上午 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 : - 无法满足所需的块组组件顺序---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"
}
},
解决方案
由于 webpack 配置,这些警告是错误的顺序导入 CSS 模块。您可以通过在您的 中添加以下代码段来删除它们gatsby-node.js
:
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)
}
}
推荐阅读
- apache-spark - 如何在 Spark 中启用 Kafka Producer Metrics?
- java - 是否可以在 EC2 中运行具有持久 H2 的 Java EE 后端?
- hive - hive sql将记录计数添加为列
- c++ - 使用 dlopen/dlsym 打开 C++ 共享库 - dlsym 返回 NULL
- javascript - onkeyup后如何触发onkeydown?
- prolog - Prolog 事后删减
- swift - NSPopover 中包含的 NSCollectionView 不显示内容
- java - 在不知道 Android Studio 中的数量的情况下动态创建复选框
- node.js - 如何等待异步 HTTP 请求在 Angular 4 上返回值?
- html - 无法以我喜欢的方式控制我的单选框/复选框边距