ReactJS安装Axios后运行npm run start出现CSS警告如何解决
问题场景
在ReactJS项目中通过npm axios install完成Axios安装后,执行npm run start指令运行项目脚本,出现如下编译警告:
[0] Compiled with warnings. [0] [0] ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css) [0] Warning [0] [0] Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet. [0] [0] ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css) [0] Warning [0] [0] Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet. [0] [0] ./node_modules/monday-ui-react-core/dist/main.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/monday-ui-react-core/dist/main.css) [0] Warning [0] [0] Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet. [0] [0] Search for the keywords to learn more about each warning. [0] To ignore, add // eslint-disable-next-line to the line before.
警告原因
这是PostCSS抛出的提示类警告,核心意思是当前主流浏览器已经原生支持绝大多数标准CSS属性,不需要再依赖Autoprefixer给CSS属性手动添加浏览器前缀,项目内的自有CSS文件、引入的第三方组件CSS触发了这个校验规则。
解决方法
- 清理手动添加的前缀和冗余配置
检查自行编写的src/index.css、src/App.css文件,删掉所有手动写的-webkit-、-moz-、-ms-这类浏览器前缀;同时检查项目根目录下的postcss.config.js、.postcssrc文件,以及package.json里的postcss配置项,如果有手动引入、配置Autoprefixer的规则直接删掉即可。新版本Create React App的内置构建链已经自动处理CSS兼容前缀,不需要额外手动配置。 - 跳过第三方依赖的前缀校验
警告中触发提示的monday-ui-react-core是第三方依赖包,不需要修改它的源码。可以在项目根目录新建.env文件,写入配置SKIP_PREFLIGHT_CHECK=true,保存后重新执行npm run start启动项目,就会跳过这类CSS校验提示。 - 修复依赖版本冲突问题
如果是升级项目依赖后出现的警告,可以先删除项目下的node_modules文件夹,以及package-lock.json(使用yarn的话删除yarn.lock)文件,重新执行npm install安装完整依赖后重启服务即可。
内容的提问来源于stack exchange,提问作者Nancy Moore
相关产品推荐
相关产品推荐

