Question

我构建了一个小型测试项目来试用 Ant Design 组件。我正在使用 static inline uint8_t a_debug(uint8_t j, char const *caller_name) { printf("a was called by %s.\n", caller_name); return a(j); } 和 gatsby-plugin-antd，以及 antd。我的问题是 Antd 主题覆盖了我的全局样式。我曾尝试将全局样式的导入放在 gatsby-plugin-sass 和我的 Layout 组件中，但是从 node_modules 内部加载的样式总是在我自己的全局样式之后结束。

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

gatsby-browser.js

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

Answer 1

您可以尝试 customizing the html.js 输出。您可以通过以下方式获取：

if ($request->username) {
    $user = User::where('email', $request->username)
                ->orWhere('contact_no', $request->username)
                ->first();
}

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

完成后，它应该看起来像：

/src

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

您可以通过操作这些行来更改 HTML 输出。如果 Gatsby 在 <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> 文件夹中找到一个 html.js，它将使用它来创建最终输出。

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

1 个答案: