我的项目中引入swiper运行后发现控制台呈现很多相似于上面的正告
warning in ./node_modules/swiper/css/swiper.cssModule Warning (from ./node_modules/postcss-loader/src/index.js):Warning(429:3) Custom property ignored: not scoped to the top-level :root element (.swiper-lazy-preloader-black { ... --swiper-preloader-color: ... }) @ ./node_modules/swiper/css/swiper.css 4:14-135 14:3-18:5 15:22-143 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/payment/pay.vue?vue&type=script&lang=js& @ ./src/views/payment/pay.vue?vue&type=script&lang=js& @ ./src/views/payment/pay.vue @ ./src/router/payment/index.js @ ./src/router sync index\.js$ @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://10.26.155.86:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
从正告中能够看出跟我的项目里应用了postcss-loader有关系,
解决方案:
找到我的项目 postcss.config.js
文件,疏忽Custom property
即可。
module.exports = { plugins: { 'postcss-cssnext': { features: { customProperties: false } }, }};