vue組件怎么引入css？兩種方式介紹！

許多剛學(xué)習(xí)vue的小伙伴們可能會(huì)有所疑惑：整個(gè)項(xiàng)目都是vue文件和js文件，跟我們熟知的html與css完全不一樣，那么怎么給我們寫的vue組件添加一點(diǎn)樣式呢？接下來就讓小編告訴你，vue組件樣式寫在哪里。

首先，一個(gè)vue文件（不管是主頁面還是組件）由三個(gè)標(biāo)簽組成，分別是?<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>?中對(duì)應(yīng)的元素的樣式，就能給?<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>

小結(jié)

vue中可以直接將組件樣式寫在style中，每個(gè)組有其獨(dú)立的樣式，可以更好地對(duì)工程進(jìn)行模塊化的管理。

以上就是關(guān)于vue組件怎么引入css的全部內(nèi)容，學(xué)習(xí)vue可以前往vue微課進(jìn)行學(xué)習(xí)。