less样式引入组件后无效解决办法

// jsx组件
import './index.less';
const { Header, Sider, Content } = Layout;
export default ({ children, ...rest }) => {
    const { pathname } = useLocation();
    const { collapsed } = useSelector((state) => state.nav);
    return <Layout>
        <Sider width="180" collapsible collapsed={collapsed} trigger={null}>
            <Nav />
        </Sider>
        <Content className='site_layout_background'>
            {children}
        </Content>
    </Layout>
}

　以上使用的site_layout_background样式在界面上无效，但检查界面Elements发现样式值赋值到元素上了，但是less样式并未真正引入组件中，找不到对应的less样式

 

 

 有可能是less并未支持，

于是在config-override配置文件中加入支持less的配置

addLessLoader({
      javascriptEnabled: true,
        modifyVars: {
           '@primary-color': '#1890ff'
        }
})

　　但是启动会报错，错误类型为：

 

 即配置代码写的不对，经查找，找到一下配置方式：

addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1890ff'
            }
        }
})

　　启动样式就成功显示啦！