global css order error

[millievn]

I use postcss-modules to handle antd in parcel.

// global.less
@import '~antd/dist/antd.less';

// App.tsx
import '../styles/global.less'

function App(){
 return <Box/>
}

// Box.tsx
import styles from './index.module.scss'
export default function Box() {

  return (
    <Form className={styles['filter-form']}  >
    </Form>
  )
}

// index.module.scss
.filter-form {
  position: relative;
  margin: 20px 0;
  padding: 8px 200px 24px 24px;
  background: #fff;
}

// postcss.config.js

module.exports = {
  modules: true,
  plugins: {
    autoprefixer: {
      grid: true,
    },
    'postcss-modules': {
      globalModulePaths: ['./styles/global.less'],
    },
  },
}

I find the global.less is placed at the bottom and has more priority. But the module.scss should have higher priority.

demo like this parcel-antd

Anything to deal with it?