这篇文章主要介绍“vue组件如何引入css”，在日常操作中，相信很多人在vue组件如何引入css问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue组件如何引入css”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
首先，一个vue文件（不管是主页面还是组件）由三个标签组成，分别是<temlate>，<script>和<style>，其中<temlate>里面是html的代码段。<script>里面是脚本文件，而<style>里面存放的就是样式文件（如下代码所示）。
计算
安全
数据库
网络和加速
企业服务
<template>
<div>主页主页
<Menu></Menu>
</div>
</template>
<script>
import Menu from "@/components/FixMenu.vue"
export default {
data () {
return {
};
},
components: {
Menu
},
computed: {},
mounted(){},
methods: {}
}
</script>
<style>
</style>只要在<style>中写入<template>中对应的元素的样式，就能给<template>中的html代码添加样式。
另外，在<style>中也可以使用@import的方式来引用外部的css文件。如下代码所示（下代码展示了import的方法和直接在style中写css的方法，另外，该代码不是完全代码，且启用了scss）：
<style lang="scss">
@import "../assets/css/cropper.css";
.fix-menu-wrap {
height: 0.98rem;
margin-top: 0.1rem;
}
.fix-menu {
background: #fff;
width: 7.5rem;
height: 0.98rem;
box-shadow: 0 -0.02rem 0.1rem rgba(55, 55, 55, 0.1);
position: fixed;
left: 50%;
bottom: 0;
margin-left: -3.75rem;
a {
float: left;
width: 25%;
height: 0.98rem;
text-align: center;
font-size: 0.24rem;
color: #838a96;
}
i {
display: block;
width: 0.6rem;
height: 0.6rem;
overflow: hidden;
margin: 0 auto;
background: url("~@/assets/img/ico-menu.png") no-repeat;
background-size: 400% 200%;
}
.sort {
background-position: 33.34% 0;
}
.sift {
background-position: 66.67% 0;
}
.my {
background-position: 100% 0;
}
.on {
color: #333;
.home {
background-position: 0 100%;
}
.sort {
background-position: 33.34% 100%;
}
.sift {
background-position: 66.67% 100%;
}
.my {
background-position: 100% 100%;
}
}
}
</style>到此，关于“vue组件如何引入css”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
