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

未知 02-07 1640

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

然后就好啦