Warning not scoped to the top level: root element appears when swiper is introduced

After introducing swiper into the project, we found that many warnings similar to the following appeared in the console

 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
 

It can be seen from the warning that it has something to do with the use of postcss loader in the project,

Solution:
Project foundpostcss.config.jsFile, ignoringCustom propertyThat’s it.

module.exports = {
  plugins: {
    'postcss-cssnext': {
      features: {
        customProperties: false
      }
    },
  }
};