1.2.5 Create-react-app+Antd+Less配置 - 大前端

最开始使用Create-react-app 搭建项目，引入antd,后来在写组件的时候发现引入less 文件样式未生效. 之后开始配置,看到很多的文章中提到收拾配置webpack ;有的地方看 ... 主页简介前端面试React博客2019201820172016关于选择语言中文 Github react_study1.1.1安装ant-design报错1.1.2react组件api1.1.3React组件生命周期1.1.4ReactNative运行原理1.1.5react父子组件通信1.2.1react基础写法1.2.1umi使用1.2.3'react-scripts'不是内部或外部命令1.2.4使用antdform遇到的问题1.2.5Create-react-app+Antd+Less配置1.暴露webpack配置文件2.安装3.修改webpack.config.js这一栏就是less文件加载问题，说明我前面配置的less-loader有问题参考1.2.5.1reactExpectedtoreturnavalueinarrowfunction1.2.6react组件中引用子组件问题1.2.6.1vscodereact配置1.2.7react打包后找不到资源路径的问题1.2.8reactScriptURLisaformofeval1.2.9react二维码生成1.3.1PureComponent和Component1.3.2react中富文本编辑器1.3.3react受控组件和非受控组件2.1.1React+antd2.1.2Redux使用2.1.3规范2.1.4reactrouter使用2.1.5react图表库深入React#1.2.5Create-react-app+Antd+Less配置最开始使用Create-react-app搭建项目，引入antd,后来在写组件的时候发现引入less文件样式未生效之后开始配置,看到很多的文章中提到收拾配置webpack;有的地方看到了React-app-rewired#1.暴露webpack配置文件使用create-react-app创建的项目，默认情况下是看不到webpack相关的配置文件，我们需要给它暴露出来，使用yarneject ?Areyousureyouwanttoeject?Thisactionispermanent.Yes 1234目录多了一个config文件夹#2.安装yarnaddlessless-loader 1#3.修改webpack.config.js{ test:/\.(css|less)$/, use:[ require.resolve('style-loader'), /*{ loader:require.resolve('css-loader'), options:{ importLoaders:1, }, },*/ { loader:require.resolve('less-loader')//compilesLesstoCSS } ], }, 12345678910111213141516配置好后重新yarnstart,报错：Error:[BABEL]H:\react\antd-demo\src\index.js:Cannotfindmodule'@babel/plugin-transform-react-jsx-source'(Whileprocessing:"H:\\react\\antd-demo\\node_modules\\babel-preset-react-app\\index.js$1") 1解决办法：先删除node_modules,再yarninstall,yarnstart又出现indent缩进问题，原来我编辑器设置2，.eslitrc.js中配置的4，又遇到less问题"less":"^3.9.0", "less-loader":"^4.1.0", "webpack":"4.28.3",Failedtocompile. ./src/container/login/login.less(./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/file-loader/dist/cjs.js??ref--7-oneOf-7!./src/container/login/login.less) module.exports=__webpack_public_path__+"static/media/login.50cb196b.less"; ^ Unrecognisedinput inH:\react\antd-demo\src\container\login\login.less(line1,column15) 123456789确实没有vue的配置好#这一栏就是less文件加载问题，说明我前面配置的less-loader有问题最后又去找一些配置修改webpack.config.js#1.添加正则 //stylefilesregexes constcssRegex=/\.css$/; constcssModuleRegex=/\.module\.css$/; constsassRegex=/\.(scss|sass)$/; constsassModuleRegex=/\.module\.(scss|sass)$/; constlessRegex=/\.less$/; constlessModuleRegex=/\.module\.less$/; #2.在`module:{rules中有一个oneOf`内添加配置 12345678910{ //"oneOf"willtraverseallfollowingloadersuntilonewill //matchtherequirements.Whennoloadermatchesitwillfall //backtothe"file"loaderattheendoftheloaderlist. oneOf:[ #配置less { test:lessRegex, exclude:sassModuleRegex, use:getStyleLoaders( { importLoaders:2, sourceMap:isEnvProduction&&shouldUseSourceMap }, 'less-loader' ), //Don'tconsiderCSSimportsdeadcodeevenifthe //containingpackageclaimstohavenosideeffects. //Removethiswhenwebpackaddsawarningoranerrorforthis. //Seehttps://github.com/webpack/webpack/issues/6571 sideEffects:true }, //AddssupportforCSSModules,butusingSASS //usingtheextension.module.scssor.module.sass { test:lessModuleRegex, use:getStyleLoaders( { importLoaders:2, sourceMap:isEnvProduction&&shouldUseSourceMap, modules:true, getLocalIdent:getCSSModuleLocalIdent }, 'less-loader' ) }, //"file"loadermakessurethoseassetsgetservedbyWebpackDevServer. 123456789101112131415161718192021222324252627282930313233#参考2019-03-26最新版的create-react-app如何添加lesswebpack4.29-less-loaderCreate-react-app+Antd+Less配置 ← 1.2.4使用antdform遇到的问题 1.2.5.1reactExpectedtoreturnavalueinarrowfunction →