Vue3+Vite+Pinia+Naive后台管理系统搭建之二：scss 的安装和使用

前言

如果对 vue3 的语法不熟悉的，可以移步 Vue3.0 基础入门，快速入门。

github 开源库：Vue3-Vite-Pinia-Naive-Js

gitee   开源库：Vue3-Vite-Pinia-Naive-Js

1. 安装依赖

yarn add sass -D
// or
npm install sass -D

 2. 新增 src/assets/style/reset.scss 页面样式初始化

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
// table,
caption,
tbody,
tfoot,
thead,
// tr,
th,
// td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

// table {
//   border-collapse: collapse;
//   border-spacing: 0;
// }

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica";
}

3. 新增 src/assets/style/common.scss 共用样式

::-webkit-scrollbar {
  width: 14px;
  height: 12px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  display: block;
  min-height: 12px;
  min-width: 8px;
  border-radius: 6px;
  background-color: rgb(217, 217, 217);
}

::-webkit-scrollbar-thumb:hover {
  display: block;
  min-height: 12px;
  min-width: 8px;
  border-radius: 6px;
  background-color: rgb(159, 159, 159);
}

4. 新增 src/assets/style/utils.scss 工具样式

.u__border {
  border: 1px solid;
}

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

.u__ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u__ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u__ellipsis-auto {
  position: relative;
  line-height: 1.4em;
  height: 2.8em; /* 这里的高度是line-height的两倍 */
  overflow: hidden;
  &::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 5px 1px 30px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 50%)
      repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
}

 5. 新增 src/assets/style/index.scss scss样式集合

@import "./reset.scss";
@import "./common.scss";
@import "./utils.scss";

 

6. 编辑 vite.config.js  使用 @ 快捷键

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
});

7. 编辑 src/main.js 引入 src/assets/style/index.scss

import { createApp } from "vue";
import App from "./App.vue";

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

createApp(App).mount("#app");

8. 编辑 src/App.vue 使用 scss

<script setup></script>

<template>
  <div class="demo">
    <div>yqcoder</div>
  </div>
</template>

<style scoped lang="scss">
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
}
</style>

综上

scss安装完成。下一章：Vue3+Vite+Pinia+Naive后台管理系统搭建之三：vue-router 的安装和使用