在react项目中使用了sass后导入antd.css报错

在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"
  },

然后就好啦