Vue 引用全局公共样式

最新推荐文章于 2024-07-21 19:22:30 发布

胖布欧VS卡卡罗特

最新推荐文章于 2024-07-21 19:22:30 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： javascript vue 前端

本文链接：https://blog.csdn.net/boyikenan123/article/details/124293482

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中创建全局样式表，通过在`assets`文件夹创建`global.less`并导入到`main.js`，确保样式在所有组件中统一应用。涉及了HTML、CSS和Vue的集成，以及基本的样式规则设置。

摘要由CSDN通过智能技术生成

1.在assets文件夹中创建全局样式表css文件
在这里插入图片描述
2，global.less 中写入全局样式

/* 全局样式表 */
html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td{
	margin:0;
	padding:0;
}
body{
	font-family: "微软雅黑",Arial;
}
ul,ol{
	list-style:none;
}
img{
	border: 0;
}
a{
	text-decoration: none;
}

3.在main.js中引入global.css，这样就可以在所有组件中使用全局样式表

import router from './router'
// 导入全局样式表
import './assets/less/global.css'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})