我可以在从 node_modules 中的 antd 导入样式后强制加载全局样式吗？

【问题标题】：Can I force global styles to be loaded after styles imported from antd inside node_modules?我可以在从 node_modules 中的 antd 导入样式后强制加载全局样式吗？
【发布时间】：2021-07-07 20:20:37
【问题描述】：

我构建了一个小型测试项目来试用Ant Design 组件。我正在使用gatsby-plugin-antd 和antd，以及gatsby-plugin-sass。我的问题是 Antd 主题覆盖了我的全局样式。我尝试将全局样式的导入放在 gatsby-browser.js 和我的 Layout 组件中，但是从 node_modules 内部加载的样式总是在我自己的全局样式之后结束。

公平地说，我不确定问题出在 Gatsby、SASS 插件、Antd 插件还是 babel-import 或 webpack 上。

// When loaded in gatsby-browser.js
import "./src/css/public-sans.scss"
import "./src/css/styles.scss"

// When loaded in Layout component
import "../css/public-sans.scss"
import "../css/styles.scss"

有没有办法确保在开发和构建模式下我的样式覆盖 Antd 样式表中设置的样式？

【问题讨论】：

标签： sass gatsby antd

【解决方案1】：

你可以试试customizing the html.js 输出。您可以通过以下方式获得它：

cp .cache/default-html.js src/html.js

或手动，从.cache/default-html.js 复制并粘贴到/src。

完成后，它应该如下所示：

  <head>
    <meta charSet="utf-8" />
    <meta httpEquiv="x-ua-compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    {props.headComponents}
    {/* custom here your styles order */}
  </head>

来源：在this GitHub thread 中扩展Kyle Mathew 的答案（您可能会觉得很有见地）。

您可以通过操作这些行来更改您的 HTML 输出。如果 Gatsby 在 /src 文件夹中找到 html.js，它将使用它来创建最终输出。

【讨论】：