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

最新推荐文章于 2025-03-15 07:30:00 发布

渣渣兔子

最新推荐文章于 2025-03-15 07:30:00 发布

阅读量3w

点赞数 24

文章标签： vue scoped

本文链接：https://blog.csdn.net/weixin_39941429/article/details/80254724

版权

本来只是想解决如题的问题的，但是其中涉及的一些点，有些模糊，所以补充补充~

首先是有关@import的问题，一般的文件中，我们知道引用外部css，有两种方式：

1. HTML中使用link标签

<link rel="stylesheet" href="style.css" />

2.CSS中@import

<style>
   @import "style.css";
</style>

今天主要说的是@import。

语法

@import语法有两种：

@import "style.css";
@import url("style.css");

这两种语法没有什么差别。

规则

MDN中这么描述@import

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

注意到加粗的部分么——import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：

index.html
<style type="text/css">
  .hd{
    color: orange;
  }
  @import "import.css";
</style>
...
<p class="hd">我是什么颜色</p>
import.css
  .hd{
    color: blue;
  }
测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：
<style type="text/css">
  @import "import.css";
  .hd{
    color: orange;
  }
</style>
...
<p class="hd">我是什么颜色</p>
这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。

以上部分转载自点击打开链接

当然使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误

外部引用CSS中 link与@import的区别

1.从属关系区别

link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。@import是 CSS 提供的语法规则，只有导入样式表的作用。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

link支持使用js控制DOM去改变样式；@import不支持。

下面再说说VUE中scoped的编译原理吧。具体可以参考vue-loader

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。参考scoped内复写组件样式

终于要进入正文啦~~

css-loader对import的文件会当做外部资源，那么我能理解为它是把import的css文件单独提取出来，并没有把其中的样式放在<style scoped>中解析，而是最后把<style>中计算结果和import的css文件混合后，交由style-loader最后解析为style标签加载在页面里。解决办法如下：
1.
<style scoped>
    @import '../../assets/css/home.css';  
</style>
/*这样写的话import的css文件会被编译为全局样式，但是引入less等预编译文件，就会局部生效*/

2.
<style src="../../assets/css/home.css" scoped>
</style>
/*这样写的css文件中的样式只能在本组件中使用，而不会影响其他组件*/
酱酱酱~完了，后续如果有新的见解的话，会更新的哦~