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

问题描述

使用@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,因为在请求到的css中含有@import引入css的话,会发起请求把@import的css引进来,多次请求浪费不必要的资源。

@import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped


&lt;style scoped&gt;
@import "../static/css/user.css";
&lt;/style&gt;

我们只需把@import改成<style src=""></style>引入外部样式,就可以解决样式是全局的问题


&lt;style scoped src="../static/css/user.css"&gt;
&lt;style scoped&gt;
.user-content{
background-color: #3982e5;
}
&lt;/style&gt;

整体代码如下:


&lt;template&gt; &lt;/template&gt; &lt;script&gt;
export default {
name: "user"
};
&lt;/script&gt; &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
&lt;style scoped src="../static/css/user.css"&gt;
&lt;style scoped&gt;
.user-content{
background-color: #3982e5;
}
&lt;/style&gt;

参考链接

MDN Web技术文档 @import

原文地址:https://segmentfault.com/a/1190000012728854

上一篇:vue3 自定义 hooks 优雅处理异步调用 ajax


下一篇:SecureCRT中某些命令提示符下按Backspace显示^H的解决方法