关于vue.js:引入swiper出现not-scoped-to-the-toplevel-root-element-警告

我的项目中引入 swiper 运行后发现控制台呈现很多相似于上面的正告

 warning  in ./node_modules/swiper/css/swiper.css

Module 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}
    },
  }
};