[重构倒数第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等命名规则也就可以不需要使用。

加入了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>

唯独我不会使用以下这种方式来引入使用 css

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

看过很多人在写 component 的时候，引入的方式跟使用的方式很多都不一致，一下scopsd，一下又 @import 这样子的开发习惯其实不是很好，且难以维护，所以这次在这边把关於如何撰写以及如何载入外部的CSS整理出来，希望大家可以在写 Vue 的时候也可以注意到 CSS 使用跟管理。

好啦! 今天就介绍到这边，明天见!

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员，然後再使用下面连结进入网站点击「立即购课」，这样才可以让我获得更多的课程分润，还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程，如果你觉得不错的话，可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友，我也有开设JS的入门课程，可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng