create-react-app怎么按需引入antd和主题定制

React

2020-04-02

25

0

第一步暴露配置:

yarn eject


第二步实现antd按需加载

yarn add babel-plugin-import

// 修改package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}


第三步less引入

yarn add less less-loader -S-D
// 修改config目录下webpack.config.js文件
// 其实就是复制sass的配置修改成less
// 复制并添加**+**后面的内容

// style files regexes
+ const lessRegex = /\.less$/;
+ const lessModuleRegex = /\.module\.less$/;


// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass

+ {
+   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'
+   ),
+ },


第四步主题定制

// 同样是config目录下webpack.config.js文件

//if (preProcessor) {
// ...
// }
if (preProcessor) {
+  let loader = require.resolve(preProcessor)
+  if (preProcessor === "less-loader") {
+  loader = {
+    loader,
+    options: {
+      modifyVars: { //自定义主题
+      'primary-color':' #1890ff ',
+    },
+    javascriptEnabled: true,
+  }
+ }
+ }
+ loaders.push(loader);
}
// 修改第二步package.json下的"style": "css",改为"style": true

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}


问题:在使用yarn eject暴露webpack配置后,再次使用yarn start 不能启动项目,显示缺少某包
解决:删除node-modules,使用npm或cnpm重新npm install

 

 

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01