vue 中css文件引入问题

css外部文件引入:

全局引用

在main.js文件中

import './style/reset.css'

   <style>
         @import '../../xxx.css';    //要写分号否则会报错
    </style>

<style  scoped>
            //写scoped表示只在当前局部有效
             body{
                    width:1000px;     //这样写才是局部有效的，如果是引入的css文件就还是全局有效
             }
</style>

以下参考：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 "style.css";
@import url("style.css");

两种写法效果一样

注意到加粗的部分么——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不支持。