vue專案如何全域性引入scss檔案

css 檔案可以直接引入到main.js中，scss檔案如果沒有scss特殊語法也可以直接引入index.js，只有scss檔案中的特殊語法全域性引入的時候無法顯示，所以需要特殊處理

樣式檔案目錄：

在專案中新建了樣式檔案，分別又建立了三個資料夾

• common.scss：是清除預設樣式和公共class的檔案
• index.scss：統一修改專案中公共樣式的檔案
• scssFile.scss：是全域性所用到的scss特殊語法的檔案,宣告變數，mixin等等

因為main.js可以直接import css檔案，而不可以直接import scss檔案， common.scss 和 index.scss 雖然字尾名是scss，但是樣式中是沒有scss特殊語法的，所以直接引入到main.js中即可全域性生效

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

而scssFile.scss中的特殊語法在main.js中引入並不會起效果，所以需要每個檔案都要引入一下，後期優化會變得維護比較麻煩，我們可以利用sass-loader的特性，可以將一段程式碼插入在每個scss檔案的頭部

下載依賴：

yarn add node-sass --save-dev
yarn add sass-loader --save-dev

或者

npm install node-sass --save-dev
npm install sass-loader --save-dev

將以下程式碼新增到vue.config.js配置檔案中：

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/style/scssFile.scss";`
      }
    }
  }

因為這種方法是在每個scss檔案頭部都引入了scssFile.scss檔案，如果這個檔案中有以下格式的程式碼（普通樣式編寫），那麼這個檔案將會重複渲染，假如引入到了10個vue檔案中，那麼下面這行樣式就會被渲染10次，

.border {
  border: 1px solid #333;
}