[聚合文章] Vue style里面使用@import引入外部css, 作用域是全局的解决方案

<template>

</template>

<script>
    export default {
        name: "user"
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../static/css/user.css";
.user-content{
  background-color: #3982e5;
}
</style>

Add "scoped" attribute to limit CSS to this component only

这句话大家应该是见多了, 我命名也使用scoped, 但是使用@import引入外部样式表作用域依然是全局的
看了一遍@import的规则后, 进行初步猜测, 难道是@import引入外部样式表错过了scoped style?(目前我也还不懂具体原理, 请知情人士告知)
@import 告诉 CSS 引擎引入一个外部样式表
凭着这个疑问, 猜到了解决方案：使用<style src=""></style>引入外部样式, 代码如下:

<template>

</template>

<script>
    export default {
        name: "user"
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped src="../static/css/user.css">
<style scoped>
.user-content{
  background-color: #3982e5;
}
</style>

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。