react脚手架搭建项目,运行出现这个问题
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported
根据错误提示关键词 webpack
,source-map
推测是webpack的source-map问题,运行npm run eject
暴露webpack
配置文件,直接搜索source-map
,找到对应位置
rules: [
// Handle node_modules packages that contain sourcemaps
shouldUseSourceMap && {
enforce: 'pre',
exclude: /@babel(?:\/|\\{1,2})runtime/,
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
loader: require.resolve('source-map-loader'),
},
]
确实没有less
的正则,我尝试加上
rules: [
// Handle node_modules packages that contain sourcemaps
shouldUseSourceMap && {
enforce: 'pre',
exclude: /@babel(?:\/|\\{1,2})runtime/,
test: /\.(js|mjs|jsx|ts|tsx|css|less)$/,
loader: require.resolve('source-map-loader'),
},
]
依旧报错,然后我删除了css
rules: [
// Handle node_modules packages that contain sourcemaps
shouldUseSourceMap && {
enforce: 'pre',
exclude: /@babel(?:\/|\\{1,2})runtime/,
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('source-map-loader'),
},
]
不报错了,所以是loader无法解析less,才想起好像react脚手架需要自己配置less的loader
为了验证一下,自己写了一个less文件,引入app,发现真的无法解析,所以需要自己配置一下
但是配置完后,自己的less确实可以,不过依旧报错
目前找不到其他办法,暂时直接删掉css吧