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不支持。

###另外： js中也能够引入相应的css样式 而后用js动态控制css类名的添加与删除