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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
Cari halaman induk b, naik tahap demi tahap, ia mesti dirujuk oleh halaman itu
Letak sahaja
@import '../css/bootstrap.css';去掉；换成
<style src="../css/bootstrap.css" scoped></style>dan sudah siap