this is router

import React from "react";
import {Route, Switch,Redirect} from "react-router-dom"
import {Layout} from "antd"
import "./content.less"
import asyncComponent from "./AsyncComponent"


const AsyncIndex = asyncComponent(() => import("../pages/index/index"))
const AsyncTrade = asyncComponent(() => import("../pages/order/Trade"))
const AsyncTransfer = asyncComponent(() => import("../pages/order/Transfer"))


const {Content} = Layout



export default class Contents extends React.Component {
  render() {
    return (
      <Content className="main-content">
        <Switch>
          <Route path="/merchant/console" exact component={AsyncIndex}/>
          <Route path="/trade/index" exact component={AsyncTrade}/>
          <Route path="/transfer/index" exact component={AsyncTransfer}/>
          <Redirect from="*" to="/merchant/console" />
        </Switch>
      </Content>
    );
  }
}

AsyncComponent

import React, { Component } from "react"

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props)

      this.state = {
        component: null
      }
    }

    async componentDidMount() {
      const { default: component } = await importComponent()

      this.setState({
        component: component
      })
    }

    render() {
      const C = this.state.component

      return C ? <C {...this.props} /> : null
    }
  }

  return AsyncComponent
}

but after loading webpack on demand, the js file will be mixed with css

could you tell me how to separate it