create-react-app 2.+ <项目时> 所遇到的问题，以及yarn eject 暴露webpack配置，支持less语法以及修改antd的主题颜色

Karsuo
783 阅读3分钟

本文参考地址来自CSDN

create-reat-app@2.x 的脚手架支持css,scss语法，要自行安装less，less-loader

  • npm i less less-loader -D 这一步最好在 yarn eject 暴露webpack配置后操作，不然要先git commit 一下

create-react-app@2.x <项目名称> 时,已装好less,less-loader, 以引入.less 文件做测试，yarn start 启动服务，控制台有很大可能会报错，说node_modules 里的某个文件没找到之类的

楼主亲身体会，感觉懵逼，用 create-react-app 创建项目时，感觉经常会掉包，就是有些包没pull到，有的在node_modules里只是个空文件夹，里面没内容，多数发生在 @bable 这个文件目录下，缺少各种 plugin 开头的套件，尝试了 4 次 create-react-app创建项目，才能把demo跑起来，有可能是 create-react-app 时，网络不稳定导致频繁掉包

create-reat-app@2.x <项目> 创建完时，由于要用到 antd 这个UI库来来自定义主题颜色，并且此库是less的样式引入，所以我们要在项目webapck.config.js配置less

  • 2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并，只有一个webpack.config.js

  • yarn eject 只能用一次，用完即止，多出一些文件在目录里，我们要在config文件夹下的webapck.config.js里配置

  • 新加less匹配项 copy 一份跟 sassRegex ,sassModuleRegex 一样的声明即可： const lessRegex = /.less/ const lessModuleRegex = /.module.less$/

  • 在sass的配置下新增less配置

  • { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },

  • 关掉服务，重新yarn start 在 App.js中导入less文件一切正常

配置antd组件库 需要自定义 antd 的主题色

  • yarn add babel-plugin-import

  • 在package.json中或者.babelrc中配置按需导入的组件库规则

  • "babel": "plugins": [ ["import", { "libraryName": "antd", "style": "css" }] ]

  • 完整是： "babel": { "presets": [ "react-app" ], "plugins": [ ["import", { "libraryName": "antd", "style": true }] ] }

  • 注意：如果需要修改主题默认配置的话(例如颜色)导入less文件这里应设置为"style": true 这就会引入.less文件，因为.css文件是由.less编译出来的， 如果只是用antd里的样式，没打算自定义就 "style": css

  • 注意： 当你设为true时，你会发编译失败，页面中antd组件也会没有样式了，命令行抛出如下异常：.bezierEasingMixin() Inline JavaScript is not enable. Is it set in your options?

  • 你要加上 options: { javascriptEnabled: true // 解决上文报错 },

  • 解决上文报错： options: { sourceMap: isEnvProduction && shouldUseSourceMap, // 这段sourceMap以后不一定有每个版本不同 javascriptEnabled: true // 解决上文报错 },

  • 完整是 ----在getStyleLoaders 中加：if (preProcessor) { if (preProcessor === 'less-loader') { // 为less-loader添加配置项，启动javascript loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, javascriptEnabled: true // 解决上文报错 }, }); } else { loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, }); } }

  • 修改主题颜色 在options加 ： ：modifyVars: { // 修稿主题颜色 'primary-color': '#000000', },

  • 完整是： if (preProcessor === "less-loader") { loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, modifyVars: { // 修稿主题颜色 'primary-color': '#000000', }, javascriptEnabled: true }, });

  • 注意！！！！！: 如果你在测试App.js文件中有引入 import 'antd/dist/antd.css' 记得要把他去掉，测试的时候，我忘拿了，浪费了我洗澡的时间，这样就修改了主题色了

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习

avatar
文章
阅读
粉丝