vue组件怎么引入css？两种方式介绍！

猿友 2021-06-21 15:05:11 浏览数 (10671)

许多刚学习vue的小伙伴们可能会有所疑惑：整个项目都是vue文件和js文件，跟我们熟知的html与css完全不一样，那么怎么给我们写的vue组件添加一点样式呢？接下来就让小编告诉你，vue组件样式写在哪里。

首先，一个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中可以直接将组件样式写在style中，每个组有其独立的样式，可以更好地对工程进行模块化的管理。

以上就是关于vue组件怎么引入css的全部内容，学习vue可以前往vue微课进行学习。