[重構倒數第27天] — 在 Vue 各種 CSS 的引入使用

Mike

Published in

I am Mike

7 min readSep 8, 2021

前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

今天要來談一下常常在重構的時候會看到前人在 Vue 裡面引入 CSS 的幾個方式，以及讓我來跟你說我會怎麼做。

第一種：直接在 JS 裡面引入

import "@/assets/scss/index.scss"

優點
這種引入的方式你可以直接在讓你的CSS變成Global的CSS，你可以在任何的地方都吃的到你寫的Style。

缺點
CSS 之間的命名就要很小心，如果命名沒有注意可能會發生權重覆蓋的問題，而且在引入其他套件或是框架的CSS的時候，有可能還會互相影響到。

不過在使用第三方套件的時候很常會使用這種方式來引入，畢竟設計套件的時候也會考慮到CSS命名的問題，所以套件設計的CSS規則大部分都會參照OOCSS、SMACSS、BEM等命名規則，不會撞到，所以引入套件的時候文件上面說這樣用，就放心的用吧。

第二種：在 Vue 的 components 裡面 @import Scss 檔案

<template>
  <!-- template... -->
</template>

<script>
  // script...
</script>

<style lang="scss">
    @import "assets/scss/app.scss";
</style>

這個寫法其實不是很好，因為唯一的好處就是這個SCSS檔案放到對應的component裡面，然後知道這個SCSS是對應個component的，其他一點好處都沒有，CSS也會變成 Global CSS。

在component裡面引入SCSS的動作應該直接在style 上面用src引入，像是下面這樣，而不要使用@import。

<style lang="scss" src="../assets/scss/main.scss"></style>

那你可能會說，那有variables @mixin @extend @function 這類型的檔案應該要怎麼辦呢?

我們可以在 vue.config.js 裡面加入下面這些設定，不過要注意一下sass-loader 版本的問題，細節可以參考官方文件。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
    }
  }
}

官方文件： https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

不過這樣使用要小心，如果你把除了@mixin @extend @function 這些以外的一般CSS放進去的話，就會注入多餘的CSS到檔案裡面，所以會建議loaderOptions這個設定只用於variables @mixin @extend @function 這幾個功能裡面。

第三種：直接寫在 Vue 的 component 裡面

<style lang="scss">
  #app {
    width: 100%;
    height: 100%;
    > header {
      display: flex;
      .logo {
        width: 50px
      }
    }
  }
</style>

這是一個很常見的作法，但是這樣跟前面幾個方法一樣，會把 CSS 變成 Global 的，所以今天如果你有兩個component 裡面都有 .logo 這個 class 的話，那CSS就會互相干擾，所以我會推薦在 component 裡面使用 scoped這個方法。

<style lang="scss" scoped>
  // ...
</style>

當然引入外部scss的時候一樣也可以加上scoped

<style lang="scss" src="./assets/app.scss" scoped></style>

這樣就可以在不同的component寫一樣的class名稱，達到連CSS都組件化的用意，也就意味者我們常見的 OOCSS、SMACSS、BEM 等命名規則也就可以不需要使用。

加入了scoped 的class在render後會自動加上hash來區別，所以即使今天有其他component也使用了ul.tabs這個class，我們也不會產生衝突，是一個很棒很方便的功能。

詳細的介紹我們可以看vue-loader的文件 https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css

使用上面該如何選擇 ?

首先對於原本就應該在 Global CSS 我會使用 import 的方式在 index.js 引入

import "@/assets/scss/global.scss"

還有我們引入套件的時候也會在各 component import 引入( 以swiper為例 )

<script>
  import 'swiper/swiper-bundle.css';
  // ...
</script>

然後各component的CSS就直接在component的style裡面寫入，使用scoped的功能達到私有化的效果。

<style lang="scss" scoped>
  // ...
</style>

有些套件本身有提供class讓我們去做客製化style，或是其他的處理使用，但是因為 scoped的關係，可能會對應不上，需要部份的CSS變成Global，所以這時候我們其實可以再增加一個style的區塊直接寫需要的Global CSS 即可。

<template>
  <div id="app">
    <h1 class="title"></h1>
  </div>
</template>

<style lang="scss">
  //  其他需要Global的CSS...
</style>

<style lang="scss" scoped>
  #app {
    width: 100%;
    > h1.title {
      font-size: 20px;
    }
  }
</style>