vue组件如何引入css

这篇文章主要介绍“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”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！