一、sass

簡介

sass提供了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，強(qiáng)化了css的功能，編寫css更便捷，功能更強(qiáng)大

使用

1. 安裝sass

以前用vue-cli的時(shí)候，還要安裝sass-loader、node-sass什么的，安裝的時(shí)候還會(huì)遇到各種問題，但是vite其實(shí)安裝sass就可以了，很簡單

npm install --save-dev sass

2. 編寫全局css變量/全局mixin

// 全局變量 / globalVar.scss
$font-size-normal: 32px;

$bg-color: #1989fa;

// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
    -webkit-box-shadow: 0px 0px $bulr $color;
    -moz-box-shadow: 0px 0px $bulr $color;
    box-shadow: 0px 0px $bulr $color;
}

3.vite引入并使用

//全局引入
css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多個(gè)文件，可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/style/globalVar.scss";',
      }
    }
  },

//按需引入并使用
<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
  width: 650px;
  height: 60px;
  font-size: $font-size-normal;
  background-color: $bg-color;
  @include box-shadow;
}
</style>

通過以上3步就可以在vite中使用sass了
在總結(jié)中成長，快樂碼代碼 ( ^ _ ^)