[SCSS] Vite+Vue3 プロジェクトが scss ファイルをグローバルに導入

序文

Sass は、世界で最も成熟し、安定しており、強力なプロ仕様の CSS 拡張言語です。日常のプロジェクト開発プロセスで広く使用されていますが、今日は主に Vite+Vue3 プロジェクトに scss ファイルをグローバルに導入する方法と、混合ミックスイン ファイルのさまざまな構成を導入する方法について説明します。
Vue2 の導入方法について簡単な比較をしながらお話します。

デジタル管理プラットフォーム
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
権限システムモール
個人のブログ アドレス

1. インストールと使用方法

1.1 インストール

Vite には sass プリプロセッサのローダーが組み込まれています。webpack プロジェクトのように、関連するローダーをダウンロードして設定する必要はもうありません。sass の依存関係をダウンロードしてプロジェクトで直接使用するだけで済みます。

# npm 方式
npm install -D sass

# yarn 方式
yarn add -D sass

# pnpm 方式
pnpm install sass

1.2 scss グローバル ファイルの書き込み

1.2.1 概要

以下に示すように、src ディレクトリの下に style ディレクトリを作成し、そのディレクトリ内に 3 つの scss ファイルを作成します。

• reset.scss グローバル要素スタイル リセット ファイル
  は、主に HTML 要素のデフォルト スタイルをクリアするために使用されます。大手メーカーのページにアクセスしてコピーするだけです

  /**
   *,
   *: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