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

前言

Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！在日常项目开发过程中使用非常广泛，今天主要讲一下 Vite+Vue3 项目中该如何全局引入 scss 文件，引入混合 mixin 文件的不同配置。
捎带说一下 Vue2 中的引入方式做一下简单的对比。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、安装与使用

1.1 安装

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

# npm 方式
npm install -D sass

# yarn 方式
yarn add -D sass

# pnpm 方式
pnpm install sass
1
2
3
4
5
6
7
8

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;
   }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80
  81
  82
  83
  84
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94
  95
  96
  97
  98
  99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139
  140
  141
  142
  143
  144
  145
  146
  147
  148
  149
  150
  151
  152
  153
  154
  155
  156
  157
  158
  159
  160
  161
  162
  163
  164
  165
  166
  167
  168
  169
  170
  171
  172
  173
  174
  175
  176
  177
  178
  179
  180
  181
  182
  183

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

  @import url("./reset.scss");
  
  // 边距
  .m-b-30 {
       
      margin-bottom: 30px;
  }
  
  .m-l-5 {
       
      margin
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10