vue 引入公共样式的三种方法

最新推荐文章于 2024-08-23 13:29:29 发布

今晚打老虎...

最新推荐文章于 2024-08-23 13:29:29 发布

阅读量3.7k

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/a378113472/article/details/106584142/

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

import Vue from 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '../static/css/base.css' /*引入公共样式*/

2、在index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="static/css/base.css"/>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

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

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