Vite 配置 Scss

npm

npm install sass-loader sass
           

在package.json 中檢視安裝結果

......
 "devDependencies": {
	 ......
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
	......
  },
......
           

配置 vite.config.js 檔案

......
export default defineConfig({
  //新增
  css:{
	  preprocessorOptions:{
		  scss:{
			  additionalData:'@import "./src/styles/test.scss";' //引入scss檔案
		  }
	  }
  }
})
......
           

檢測是否引入成功

1. 在 test.scss (自己建立的) 中寫入
2. 在任意一個 .vue 檔案中使用 scss

   <template>
   	<div class="text-color">Hello world</div>
   </template>
   
   <style lang="scss">
   .text-color{
   	color: $red;
   }
   </style>
              

3. 如果文字顯示為紅色，說明配置成功