javascript - berskop dalam gaya fail tunggal vue adalah tidak sah, sila berikan saya sebabnya.

Question

a.vue

<template>
    <p>
        <button class="btn btn-primary">11a.vue</button>
    </p>
</template>
<style scoped>
    @import '../css/bootstrap.css';
    
</style>

b.vue

<template>
    <p>
        <button class="btn btn-primary">b.vue</button>
    </p>
</template>
<style scoped>
    
</style>

Tetapi apabila mengakses b.vue, gaya boostrap dilampirkan tidak mempunyai kesan mengasingkan skop?

Answer 1

Saya rasa ini kerana @import

Pertama sekali, mari kita lihat prinsip skop dalam vue-loader:
https://vue-loader.vuejs.org/...

Halaman dengan gaya bootstrap hanya bermakna css bootstrap belum diproses oleh vue-loader Kemudian saya mencari kata kunci postcss dan @import berikut, dan kemudian menemui pemalam postcss-import:
https://www. . npmjs.com/package…

Saya rasa jika anda menggunakan pemalam ini, masalahnya harus diselesaikan, tetapi saya belum mengujinya, itu hanya spekulasi

Answer 2

Cari halaman induk b, naik tahap demi tahap, ia mesti dirujuk oleh halaman itu

Answer 3

Letak sahaja@import '../css/bootstrap.css';去掉；
换成<style src="../css/bootstrap.css" scoped></style> dan sudah siap