salah jajaran gaya pembungkusan vue-cli3

Dengan penggunaan meluas Vue.js dalam pembangunan bahagian hadapan, ramai pembangun telah mula menggunakan Vue CLI 3 untuk mengurus projek Vue mereka dan menggunakan Webpack untuk membungkus projek untuk persekitaran pengeluaran. Walau bagaimanapun, apabila menggunakan pembungkusan Vue CLI 3, kami mungkin menghadapi beberapa masalah salah jajaran gaya Artikel ini akan meneroka cara menyelesaikan masalah ini.

1. Semak versi kebergantungan

Apabila membungkus dengan Vue CLI 3 dan Webpack, pastikan versi semua kebergantungan adalah terkini dan tidak lebih rendah daripada keperluan Vue CLI. Anda boleh menyemak versi Vue CLI menggunakan arahan berikut:

vue --version

dan pastikan versi yang dipasang ialah 3.x.x.

Pada masa yang sama, apabila menggunakan npm atau benang untuk memasang kebergantungan, pastikan anda menggunakan versi terkini pakej, terutamanya pakej yang berkaitan dengan CSS dan gaya, seperti sass-loader, css-loader, dsb.

2. Semak konfigurasi prapemproses CSS

Vue CLI 3 menggunakan scss sebagai prapemproses CSS secara lalai. Jika anda menggunakan prapemproses CSS lain, seperti kurang atau stylus, dan ia tidak disediakan dengan betul dalam konfigurasi projek, ia boleh menyebabkan gaya tidak sejajar. Oleh itu, pastikan prapemproses CSS dikonfigurasikan dengan betul dalam fail vue.config.js, contohnya:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 使用less的变量
        modifyVars: {
          // 或者您想使用jQuery和Bootstrap等的cdn链接
          'jquery':'jquery',
          'moment':'moment',
          'i18n':'vue-i18n',
          'bootstrap':'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
        }
      }
    }
  }
}

Dalam contoh ini, kami telah menambah pilihan yang dipanggil less dan menggunakan modifyVars untuk menukar pembolehubah Kurang Lulus ke dalam fail komponen kami. Dengan mengkonfigurasi prapemproses CSS dengan betul dalam Vue CLI 3, kami boleh menyelesaikan masalah salah jajaran gaya.

3. Semak sama ada hendak menggunakan gaya global

Dalam projek Vue, kami boleh menggunakan gaya global untuk digunakan pada komponen. Jika kami menggunakan pemilih CSS kami sendiri dalam gaya global, ini mungkin menyebabkan masalah salah penjajaran gaya, kerana komponen Vue mungkin disertakan dalam elemen DOM yang mempunyai pemilih CSS yang ditentukan.

Untuk menyelesaikan masalah ini, kita boleh menggunakan skop CSS untuk mengehadkan gaya komponen. Untuk melakukan ini, dalam komponen fail tunggal Vue, kita boleh menggunakan teg 30e8033e360bcffb1ce9b4703e10b64c untuk mengehadkan gaya CSS untuk digunakan pada komponen semasa sahaja.

<template>
  <div>
    // ...
  </div>
</template>

<script>
// ...
</script>

<style scoped>
  /* 在这里定义组件的样式 */
</style>

Mengisytiharkan gaya melalui teg berskop akan mengehadkan penggunaannya dalam komponen semasa, sekali gus mengelakkan sebarang pencemaran gaya global atau gaya komponen diperkenalkan oleh elemen lain.

4. Semak sama ada terdapat sebarang konflik keutamaan pemilih

Apabila pembungkusan dengan Vue CLI 3, kami mungkin perasan bahawa sesetengah pemilih CSS sentiasa ditindih oleh pemilih lain, Ini mungkin menyebabkan untuk menggayakan salah jajaran.

Ini biasanya disebabkan oleh konflik keutamaan pemilih. Dalam komponen Vue, keutamaan ditentukan oleh faktor berikut:

a) pemilih elemen < pemilih ID sebaris

b) dengan Peraturan pemilih yang sama diisytiharkan kemudian mengatasi yang diisytiharkan dahulu

Oleh itu, jika kita menggunakan pemilih yang sama dalam komponen Vue dengan keutamaan yang sama, pemilih yang ditakrifkan kemudian akan mengatasi pemilih yang ditakrifkan dahulu.

Untuk menyelesaikan masalah ini, kami boleh cuba menggunakan pemilih CSS yang lebih khusus, dengan itu meningkatkan keutamaan mereka dan memastikan ia tidak mudah ditindih oleh pemilih lain.

5. Semak sama ada terdapat sebarang konflik CSS lain

Akhir sekali, kami perlu menyemak sama ada projek Vue kami bercanggah dengan fail CSS lain. Ini mungkin disebabkan oleh peraturan CSS yang kami gunakan dalam komponen bercanggah dengan peraturan dalam fail lain.

Untuk mengelakkan perkara ini, kami boleh menggunakan pemilih yang lebih khusus dalam peraturan CSS. Kami juga boleh mencuba menggunakan konvensyen penamaan CSS yang berbeza, seperti BEM (Block Element Modifier) ​​atau ITCSS (Extensible Composable CSS Classes).

Pada masa yang sama, untuk mengelakkan konflik, kami boleh cuba menggunakan gaya berskop untuk mengisi gaya ke dalam komponen, atau menggunakan CSS dalam penyelesaian JS, seperti Modul CSS atau Komponen Bergaya.

Ringkasan:

Di atas adalah untuk menyelesaikan masalah pembungkusan Vue CLI 3 dengan menyemak versi pergantungan, menyemak konfigurasi prapemproses CSS, menggunakan gaya global, menyemak konflik keutamaan pemilih dan menyemak konflik CSS yang lain. Kaedah kehelan gaya. Kaedah ini juga boleh digunakan untuk isu penggayaan yang berkaitan dengan pembungkusan Webpack bagi aplikasi web lain. Harap kaedah ini akan membantu anda menyelesaikan masalah yang sama semasa proses pembangunan.

Atas ialah kandungan terperinci salah jajaran gaya pembungkusan vue-cli3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!