iT邦幫忙

2021 iThome 鐵人賽

DAY 4
5
Modern Web

[ 重構倒數30天,你的網站不Vue白不Vue ] 系列 第 4

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

前言

該系列是為了讓看過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: {
        prependData: `@import "~@/variables.sass"`
      },
      scss: {
        prependData: `@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等命名規則也就可以不需要使用。

vue mike

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

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

使用上該如何選擇 ?

Vue mike

首先對於原本就應該在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>

唯獨我不會使用以下這種方式來引入使用 css

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

看過很多人在寫 component 的時候,引入的方式跟使用的方式很多都不一致,一下scopsd,一下又 @import 這樣子的開發習慣其實不是很好,且難以維護,所以這次在這邊把關於如何撰寫以及如何載入外部的CSS整理出來,希望大家可以在寫 Vue 的時候也可以注意到 CSS 使用跟管理。

好啦! 今天就介紹到這邊,明天見!

Mike Vue

那如果對於Vue3不夠熟的話呢?

Ps. 購買的時候請登入或註冊該平台的會員,然後再使用下面連結進入網站點擊「立即購課」,這樣才可以讓我獲得更多的課程分潤,還可以幫助我完成更多豐富的內容給各位。

我有開設了一堂專門針對Vue3從零開始教學的課程,如果你覺得不錯的話,可以購買我課程來學習
https://hiskio.com/packages/AYR5m7VR3

那如果對於JS基礎不熟的朋友,我也有開設JS的入門課程,可以參考這個課程
https://hiskio.com/packages/Q9R4OYoyD

訂閱Mike的頻道享受精彩的教學與分享

Mike 的 Youtube 頻道
Mike的medium
MIke 的官方 line 帳號,好友搜尋 @mike_cheng


上一篇
[重構倒數第28天] - 關於拆分 Components 的學問
下一篇
[重構倒數第26天] - 你可能不需要Vuex (You might not need Vuex)
系列文
[ 重構倒數30天,你的網站不Vue白不Vue ] 31

尚未有邦友留言

立即登入留言