Vue3+Vite+Pinia+Naive项目搭建之二：scss 的安装和使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

Vue3+Vite+Pinia+Naive项目搭建之二：scss 的安装和使用,Vue3+Vite+Pinia+Naive项目搭建,scss,前端,javascript

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 工具样式

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

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

.c-margin-r20 {
  margin-right: 20px;
}
.c-margin-r10 {
  margin-right: 10px;
}
.c-margin-b20 {
  margin-bottom: 20px;
}

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

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

Vue3+Vite+Pinia+Naive项目搭建之二：scss 的安装和使用,Vue3+Vite+Pinia+Naive项目搭建,scss,前端,javascript

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>

Vue3+Vite+Pinia+Naive项目搭建之二：scss 的安装和使用,Vue3+Vite+Pinia+Naive项目搭建,scss,前端,javascript