Vite 配置 Scss

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 (自己新建的) 中写入

   $red:red;
   

2. 在任意一个 .vue 文件中使用 scss

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

3. 如果文字显示为红色，说明配置成功