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

Time:2021-2-6

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

Recommended Today

asp.net Application of regular expression

1. Balanced group / recursive matching (?’ Group ‘), which is called the corresponding content of group, and counts it on the stack;(?’- Group ‘), and count the corresponding content named group out of the stack(?!) Zero width negative look ahead assertion. Since there is no suffix expression, attempts to match always failRegular example:,{0,1}”5″:\[[^\[\]]*(((?’Open’\[)[^\[\]]*)+((?’-Open’\])[^\[\]]*)+)*(?(Open)(?!))\],{0,1} Test […]