我已将antd.less文件添加到我的React项目中,如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import 'regenerator-runtime/runtime.js';
import App from './App';
import 'antd/dist/antd.less';
ReactDOM.render(<App />, document.getElementById('root'));
module.hot.accept();
如何减小此文件的大小,它是1,24MB? 导入 antd.min.css 文件时,无法使用在Webpack的模块规则中配置的主题变量annymor,如下所示:
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: {
'primary-color': colors.brandBlue,
'input-border-color': '#D9D9D9',
'input-placeholder-color': colors.gray6,
'input-height-base': '40px',
'border-radius-base': '2px',
'btn-height-base': '40px',
'text-color': colors.gray8,
'btn-primary-bg': colors.brandOrange,
'btn-primary-color': colors.white,
'btn-primary-border': colors.brandOrange,
},
},
},
],
},
答案 0 :(得分:0)
我不确定AntD版本4的文档发生了什么,因为当前的“与Create React App一起使用”页面不再向您展示如何以模块化方式加载CSS。
如果您备份到v3 docs,将通过{{3}获得有关如何加载处理较少的文件的说明,但仅针对您实际使用的组件 }}模块。
我们正在使用此设置,而AntD v4没有问题。
作为一个旁注(由于您担心捆绑包的大小),您也可以将相当大的力矩捆绑包替换为dayjs:babel-plugin-import