DocSpring / craco-antd

A craco plugin to use Ant Design with create-react-app
MIT License
234 stars 49 forks source link

Influence the order/priority of antd css imports #87

Closed Fensterbank closed 2 years ago

Fensterbank commented 2 years ago

Is there a way to influence in which order the stylesheets are imported?

This is my current craco.config.js using CRA5 with Antd3 with the CRA5 supporting branch https://github.com/kamronbatman/craco-antd/tree/kbatman/update_craco-antd.

const CracoAntDesignPlugin = require('@mrbatman/craco-antd')

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            math: 'always'
          }
        }
      }
    }
  ]

I also use tailwindcss and custom css overwrides, unfortunately craco-antd seems to include antd at last. This means I have to use important: true flag for tailwindcss and have to use !important everywhere, if I try to override any antd styling. Is there any way to achieve that antd is included before my import './styles/global.scss' in index.jsx, so my custom css has a higher priority?

I found this post about this issue, but no response: https://stackoverflow.com/questions/63506391/reactjs-craco-antd-rule-priority-rule-mismatch Isn't that a main issue for most people? In most cases there are needs to somehow overwrite or extend specific styles or to just append a tailwind class to increase a margin…

Fensterbank commented 2 years ago

Hm, it seems I figured it out. I had to move import './styles/global.scss' from index.jsx to App.jsx