猿问

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

根据ant官方的使用方法,我在react里面使用了ant
import{Table,Button}from'antd';
这样已经能正常使用里面提供的组件了,
但后来我想修改Table组件里面的一些样式,在还没修改前,先按照官方的方法引入ant里面的less文件
import'antd/dist/antd.less';
然后
npmrunbuild
就报错,如果把less改成css就不会报错
后面使用ant官方说的按需引入方案
importDatePickerfrom'antd/lib/date-picker';//加载JS
import'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.less
Modulebuildfailed:
@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!codeELIFECYCLE
npmERR!errno1
npmERR!my-app@0.1.0build:`nodescripts/build.js`
npmERR!Exitstatus1
npmERR!
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]',
},
},
希望指点
偶然的你
浏览 3744回答 3
3回答

qq_某年某月某日_2

题主,请问这个问题解决了吗? 我也遇到了这个问题
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答