前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第六章 样式格式化 (Sass配置)

系列文章目录（点击查看）

---

---

前言

本篇涉及安装 sass，并且配置项目 sass 的初始化样式。

---

一、安装

根据前面的项目配置，安装sass就非常的简单

yarn add sass

在 package.json 中检查是否安装成功

二、使用

在 src 文件下新增 styles 文件夹

增加 variables.module.scss 文件

// base color
$blue: #324157;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;

// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-logo-title-color: #fff;

$base-menu-light-color: #697280;
$base-menu-light-color-active: #697280;
$base-menu-light-background: #fff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

$base-sub-menu-light-background: #fff;
$base-sub-menu-light-active: #f2f3f5;
$base-sub-menu-light-hover: #f7f9fa;

$--color-primary: #409eff;
$--color-success: #67c23a;
$--color-warning: #e6a23c;
$--color-danger: #f56c6c;
$--color-info: #909399;

$base-sidebar-width: 260px;

增加 transition.scss 文件

// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

增加 element.scss 文件

#app {
  & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
  & .theme-dark .el-sub-menu .el-menu-item {
    background-color: $base-sub-menu-background !important;

    &:hover {
      background-color: $base-sub-menu-hover !important;
    }
  }

  .el-button.is-text {
    padding-right: 0;
    padding-left: 0;
  }

  .el-table {
    margin: 10px 0;
  }

  .scp-table .el-table {
    font-size: 12px;

    --el-table-border: transparent;

    .el-table__inner-wrapper::before {
      display: none;
    }

    .el-table__header-wrapper {
      border-top: 1px solid #f2f3f5;

      th {
        height: 50px !important;
        font-size: 12px !important;
        color: #909399 !important;
        background: #fff !important;
        font-weight: normal !important;
      }
    }

    .el-table__body-wrapper {
      font-weight: bold;
      overflow: hidden;
      border: 1px solid #f2f3f5;
      border-bottom: 0;
      border-radius: 10px;
    }

    .el-table__cell {
      padding: 8px 0;

      .cell {
        /* height: auto; */
        line-height: 30px;
      }

      /* background: #f4f9fa; */
    }

    .el-table__row--striped .el-table__cell {
      /* background: #f2f3f5; */
    }

    .el-empty__description p {
      font-weight: normal;
      font-size: 12px;
    }
  }

  .el-dialog__body {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .el-input-number {
    width: 100%;

    .el-input__inner {
      text-align: left;
    }
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

增加 index.scss 文件

@import './variables.module';
@import './transition';
@import './element';

:root {
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

.flex {
  display: flex;
}

.flex-sb {
  display: flex;
  justify-content: space-between;
}

.flex-c {
  display: flex;
  justify-content: center;
}

.flex-sa {
  display: flex;
  justify-content: space-around;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-align {
  display: flex;
  align-items: center;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-column-align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-align-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-align-sa {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-column-sa {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.flex-align-ai {
  display: flex;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-sba {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

三、安装公共样式

yarn add normalize.css

四、入口文件配置

在 main.ts 文件中

import { createApp } from 'vue'
import App from './App.vue'

import 'normalize.css' # 新增
import './styles/index.scss' # 新增
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

五、测试

修改 App.vue 文件代码

<template>
  <div style="height: 100vh" class="flex-c flex-align">
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

---

总结

本文主要介绍了如何安装 sass 并在 package.json 中确认安装成功，创建了 styles 文件夹，并添加了 variables.module.scss、transition.scss、element.scss 和 index.scss 文件，安装了 normalize.css 并在入口文件 main.ts 中引入，修改了 App.vue 文件以测试样式应用。上文中的配置代码可在 github 仓库中直接 copy，仓库路径：https://github.com/SmallTeddy/music-explorer-web。