[Solved]-How to determine the order of css in my create react app build with webpack and customize-cra?-Reactjs

so first i had to set an environmental variable in my package.json file for my start script when i am doing local developement "start": "node_env=local react-app-rewired start",

then in my customizer-cra config-overrides.js i set my node environmental variable const islocal = process.env.node_env === 'local'; and then i imported the minicssextractplugin plugin from webpack const minicssextractplugin = require('mini-css-extract-plugin');

then i put a ternary to check if the app is running locally where this does not occur or if it is in production where it does occur. the style-loader was loading the chunk.css file before the compiled less code in this situation but it could have been sass also. so i change the code from this:

addwebpackmodulerule({
    test: /\.less$/,
    use: [
      { loader: 'style-loader'},
      { loader: 'css-loader' },
      { loader: 'less-loader' }
    ],
  }),

to this:

addwebpackmodulerule({
    test: /\.less$/,
    use: [
      { loader: islocal ? 'style-loader' : minicssextractplugin.loader },
      { loader: 'css-loader' },
      { loader: 'less-loader' }
    ],
  }),

and that fixed the issue.