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>