在react项目中使用了sass后导入antd.css报错
最近在项目导入了antd,在引用他样式的时候,项目报错,如果用import 导入antd.css,页面能正常出现,但终端这里一直报错,大概就是这个
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.less’ URL is not supported
找了以下原因,应该是css文件不能在这里被解析,要用less才行
解决方法:
npm install customize-cra react-app-rewired --dev
yarn add less-loader@7.3.0
yarn add babel-plugin-import
安装好上面的包以后,在根目录下新建config.overrides.js文件,把这段代码放进去
const { override, addLessLoader, fixBabelImports } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: 'es',
style: "css",
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
},
sourceMap: true,
}),
);
然后修改package.json文件中scripts的启动,把react-scripts,改成react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
然后就好啦