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'
            }
        }
})

　　啟動樣式就成功顯示啦！