【SCSS篇】Vite+Vue3项目全局引入scss文件

一、安装与使用

1.1 安装

vite 已经将 sass 预处理器的 loader 内置了，我们不用再像 webpack 项目中那样，需要下载和配置一堆相关的loader，我们只需要下载 sass 依赖，就能直接在项目中使用了：

# npm 方式
npm install -D sass

# yarn 方式
yarn add -D sass

# pnpm 方式
pnpm install sass

1.2 scss 全局文件编写

1.2.1 概述

如下图，src 目录下新建 styles 目录，并在目录中创建三个 scss 文件：

• reset.scss 全局元素样式重置文件
  主要用于清除 HTML 元素默认样式用，随便去一个大厂页面下 copy 一下就行

/**
 *,
 *:after,
 *:before {
     box-sizing: border-box;
 
     outline: none;
 }
 
 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 {
     font: inherit;
     font-size: 100%;
 
     margin: 0;
     padding: 0;
 
     vertical-align: baseline;
 
     border: 0;
 }
 
 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;
     &:before,
     &:after {
         content: '';
         content: none;
     }
 }
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
 
     position: relative;
 
     vertical-align: baseline;
 }
 sup {
     top: -.5em;
 }
 sub {
     bottom: -.25em;
 }
 
 table {
     border-spacing: 0;
     border-collapse: collapse;
 }
 
 input,
 textarea,
 button {
     font-family: inhert;
     font-size: inherit;
 
     color: inherit;
 }
 
 select {
     text-indent: .01px;
     text-overflow: '';
 
     border: 0;
     border-radius: 0;
 
     -webkit-appearance: none;
        -moz-appearance: none;
 }
 select::-ms-expand {
     display: none;
 }
 
 code,
 pre {
     font-family: monospace, monospace;
     font-size: 1em;
 }

• global.scss 全局样式文件
  引入 reset.scss 文件，并根据项目情况添加一些全局可使用的原子类

@import url("./reset.scss");

// 边距
.m-b-30 {
    margin-bottom: 30px;
}

.m-l-5 {  
    margin-left: 5px;
}