vite 2.0 配置 scss 全局樣式

首先要安裝scss：

yarn add sass -D
# 或者
npm i sass -D
           

接着，就能在package.json 的開發依賴項找到sass。

如果隻是像下面一樣在vue 檔案中使用scss，其實完全不需要其他配置。

<template>
  <nav>

  </nav>
</template>

<script>
</script>

<style  scoped>
nav{
    background-color:#3e6ff4;
    color:white;
}
</style>
           

但如果想要把scss寫的樣式作為單獨的檔案（如單獨作為全局樣式），這時就需要在

vite.config.js

配置了。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    // css預處理器
    preprocessorOptions: {
      scss: {
      // 此處修改為要被預處理的scss檔案位址
        additionalData: '@import "./src/index.scss";'
      }
    }
  }
})
           

之後呢，就不需要在

main.js

中引入這個scss檔案了。

另外，在scss檔案中的圖檔或者字型位址路徑要變化，不然檔案可能會找不到。

// index.scss 檔案
@font-face {
    font-family: "maoken";
    // 不能是 ./assets/fonts/maoken.ttf'，而要寫如下的絕對路徑
    src: url(/src/assets/fonts/maoken.ttf) format('truetype');
}