1.引入单独的样式文件，这种方式引入的样式文件在整个项目中都生效
//main.js
import Vue from 'vue';
import Vuex from 'vuex'
import store from '@/store/store.js';
import ElementUI from 'element-ui';
//使用require来引入
require('style.css')
Vue.use(ElementUI);
Vue.use(Vuex);
new Vue({
el:'#app',
router,
template:'<App/>',
components:{App}
})
2.在某个.vue中引入样式文件
在单个scoped中添加 只影响到当前页面
<style scoped>
@import 'style.css'
</style>
<template>
<div>
test
</div>
</template>
<script>
export default{
data(){
return
}
}
</script>
3.在index.html中引入样式文件，这种方式也是整个项目都能够公用
<!DOCTYPE html>
<html style="overflow:initial">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="static/img/efsf.ico">
<link rel="stylesheet" type="text/css" href="./static/css/bootstrap.css">
</head>
</html>
ps：
使用这种方式导入css，会因为css种的图片地址加载错误，导致报错
<style lang="scss" scoped>
@import "/assets/css/stylelogin.scss";
</style>
改用如下方式可以解决
<style scoped src="../assets/css/stylelogin.scss"></style>
网友评论