react 类暴露_react暴露后 antd按需加载和自定义主题

react项目，yarn eject后暴露出webpack版本为

"webpack": "4.19.1", "webpack-dev-server": "3.1.14",

，相对于以前的 "webpack": "3.8.1","webpack-dev-server": "2.9.4",有大的不同，

其中将以前的webpack.config.dev.js和webpack.config.prod.js合并成webpack.config.js。

现在我们来对比下如何在新的"webpack": "4.19.1"中添加less-loader，并且通过插件babel-plugin-import实现antd的按需加载。

1 安装babel-plugin-import 和less-loader

yarn add babel-plugin-import

yarn add antd

yarn add less less-loader

2.1 修改package.json：添加antd库的样式

"babel": {

"presets": [

"react-app"

],

"plugins": [

[

"import",

{

"libraryName": "antd",

"style": "css"

}

]

]

}

提示:如果在package.json中没有看到上面的形式，则需要先 reject项目。

2.2 定制主题

由于antd样式使用less开发的，所以我们可以定义全局变量进行覆盖

yarn reject

复制代码修改配置环境(webpack.config.js)

定义全局变量

// style files regexes

const cssRegex = /\.css$/;

const cssModuleRegex = /\.module\.css$/;

//在这添加

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

const sassRegex = /\.(scss|sass)$/;

const sassModuleRegex = /\.module\.(scss|sass)$/;

复制代码配置less-loader

//@To-do 原来的内容

// Adds support for CSS Modules, but using SASS

// using the extension .module.scss or .module.sass

{

test: sassModuleRegex,

use: getStyleLoaders(

{

importLoaders: 2,

modules: true,

getLocalIdent: getCSSModuleLocalIdent,

},

'sass-loader'

),

},

//@To-do 添加如下内容

{

test: lessRegex,

exclude: lessModuleRegex,

use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),

},

// Adds support for CSS Modules, but using SASS

// using the extension .module.scss or .module.sass

{

test: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 2,

modules: true,

getLocalIdent: getCSSModuleLocalIdent,

},

'less-loader'

),

},

复制代码定义全局样式

//@To-Do 注释原来内容

// if (preProcessor) {

// loaders.push(require.resolve(preProcessor));

// }

//@To-do 新添加内容

if (preProcessor) {

let loader = require.resolve(preProcessor)

if (preProcessor === "less-loader") {

loader = {

loader,

options: {

modifyVars: { //自定义主题

'primary-color':' #1890ff ',

},

javascriptEnabled: true,

}

}

}

loaders.push(loader);

}

return loaders;

复制代码修改package.json

"babel": {

"presets": [

"react-app"

],

"plugins": [

[

"import",

{

"libraryName": "antd",

"style": true //修改处

}

]

]

}

作者：sbwxffnhc

链接：https://juejin.im/post/5c3964986fb9a049b41cb040

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。