为了账号安全,请及时绑定邮箱和手机立即绑定

react 引入ant的less文件后报错,不知道如何才能正确引用

react 引入ant的less文件后报错,不知道如何才能正确引用

偶然的你 2019-05-22 18:14:07
根据ant官方的使用方法,我在react里面使用了antimport{Table,Button}from'antd';这样已经能正常使用里面提供的组件了,但后来我想修改Table组件里面的一些样式,在还没修改前,先按照官方的方法引入ant里面的less文件import'antd/dist/antd.less';然后npmrunbuild就报错,如果把less改成css就不会报错后面使用ant官方说的按需引入方案importDatePickerfrom'antd/lib/date-picker';//加载JSimport'antd/lib/date-picker/style/css';//加载CSS//import'antd/lib/date-picker/style';//加载LESS也是引入css就没错,引入less就报错最后改为用使用babel-plugin-import做按需引入,//.babelrcorbabel-loaderoption{"plugins":[["import",{"libraryName":"antd","libraryDirectory":"es","style":"css"}]//`style:true`会加载less文件]}也是一样npmrunbuild的报错信息如下:Failedtocompile../node_modules/antd/es/input/style/index.lessModulebuildfailed:@import"./search-input";^Can'tresolve'./search-input'in'F:\webproject\old\user\marketmgr\thirdmanager\my-app\node_modules\antd\es\input\style'inF:\webproject\old\user\marketmgr\thirdmanager\my-app\node_modules\antd\es\input\style\index.less(line33,column0)npmERR!codeELIFECYCLEnpmERR!errno1npmERR!my-app@0.1.0build:`nodescripts/build.js`npmERR!Exitstatus1npmERR!npmERR!Failedatthemy-app@0.1.0buildscript.npmERR!Thisisprobablynotaproblemwithnpm.Thereislikelyadditionalloggingoutputabove.npmERR!Acompletelogofthisruncanbefoundin:npmERR!C:\Users\keiouks\AppData\Roaming\npm-cache\_logs\2018-02-28T01_24_26_181Z-debug.log不管使用哪种方法,只要引入ant里面的less,就报这个错我已经安装了less和less-loader,下面是webpack的配置{test:/\.less$/,loaders:['style-loader','css-loader','less-loader']},//"file"loadermakessurethoseassetsgetservedbyWebpackDevServer.//Whenyou`import`anasset,yougetits(virtual)filename.//Inproduction,theywouldgetcopiedtothe`build`folder.//Thisloaderdoesn'tusea"test"soitwillcatchallmodules//thatfallthroughtheotherloaders.{//Exclude`js`filestokeep"css"loaderworkingasitinjects//itsruntimethatwouldotherwiseprocessedthrough"file"loader.//Alsoexclude`html`and`json`extensionssotheygetprocessed//bywebpacksinternalloaders.exclude:[/\.(js|jsx|mjs)$/,/\.html$/,/\.json$/,/\.scss$/,/\.less$/],loader:require.resolve('file-loader'),options:{name:'static/media/[name].[hash:8].[ext]',},},希望指点
查看完整描述

3 回答

?
qq_某年某月某日_2

TA贡献1条经验 获得超0个赞

题主,请问这个问题解决了吗? 我也遇到了这个问题

查看完整回答
反对 回复 2020-03-16
  • 3 回答
  • 0 关注
  • 3743 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信