Can I force global styles to be loaded after styles imported from antd inside node_modules?

Question

I built a small test project to try out the Ant Design components. I am using gatsby-plugin-antd and antd, as well as gatsby-plugin-sass. My problem is that the Antd theme overwrites my global styles. I have tried putting the import for the global styles in gatsby-browser.js and in my Layout component but the styles loaded from inside node_modules always end up after my own global styles.

To be fair, I am not sure if the issue lies with Gatsby, the SASS plugin, the Antd plugin or even babel-import or 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"

Is there a way to ensure that my styles override the ones set in the Antd stylesheets, both in develop and build mode?

Ferran Buireu Ferran Buireu · Accepted Answer · 2021-04-13T05:02:29

You can try customizing the html.js output. You can get it by:

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

Or manually, copying from .cache/default-html.js and pasting it in /src.

Once done, it should look something like:

  <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>

Source: extending Kyle Mathew's answer in this GitHub thread (which you may find insightful).

You can change your HTML output by manipulating those lines. If Gatsby finds an html.js inside /src folder, it will take it to create the final output.

Can I force global styles to be loaded after styles imported from antd inside node_modules?

1 Answers