vue引用css的方法

lewis 6年前 (2019-04-06) 阅读数 11 #程序编程

文章标签 css vue

vue引用css的方法：1、在入口js文件main.js中使用import代码引入css文件；2、在index.html文件中使用link标签引入css；3，在app.vue中使用style标签引入css即可。

具体操作步骤：

1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。

importVuefrom'vue'

importAppfrom'./App'//引入App这个组件

importrouterfrom'./router'/*引入路由配置*/

importaxiosfrom'axios'

import'../static/css/global.css'/*引入公共样式*/

2、在index.html中引入

<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8">
<title>stop</title>
<linkrel="stylesheet"href="./static/css/global.css">/*引入公共样式*/
</head>
<body>
<divid="app"></div>
<!--builtfileswillbeautoinjected-->
</body>
</html>

3、在app.vue中引入，但是这样引入有一个问题，就是在 index.html的HEADH上会多出一个空的<style></style>

<template><divid="app">
<router-view/>
</div>
</template>
<script>
exportdefault{
name:'app'
}
</script>
<style>
@import'./../static/css/global.css';/*引入公共样式*/
</style>