推荐：vue解决引入外部css问题和解决css引入背景问题

Vue中引入css文件：

1.1：在style中引用

在style标签中引入(可设置成局部)
在标签上添加 scoped 属性后则变成了局部引用,文件后缀改为scss或者less才能变成局部的
global.css文件仍然是全局引用

<style scoped lang="scss">
    @import "../assets/css/global.css";
    @import "../assets/css/part.scss";
</style>

1.2：在js中引用

import "@/assets/css/global.css";
import "@/assets/css/part.scss";

 

vue中用本地的静态图片做背景：

1.1:

<div  :style="background"><div>

然后把style样式加到data中：

data() {

    return {

      background: {

          backgroundImage:'url(' + require('@/assets/images/background.png') + ')',

          backgroundRepeat:'no-repeat',

          backgroundSize:'100% 100%'

      }

    }
}

记得一定要用require

1.2:

或者data这样定义：

background:require("@/assets/images/background.png"),

style样式在HTML中加上：

<div :style="{background: 'url('+background+')','background-size':'100% 100%'}"></div>