Vite 配置 Scss_vite 配置scss

Vite 配置 Scss

npm

npm install sass-loader sass
1

在package.json 中查看安装结果

......
 "devDependencies": {
	 ......
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
	......
  },
......
1
2
3
4
5
6
7
8

配置 vite.config.js 文件

......
export default defineConfig({
  //新增
  css:{
	  preprocessorOptions:{
		  scss:{
			  additionalData:'@import "./src/styles/test.scss";' //引入scss文件
		  }
	  }
  }
})
......
1
2
3
4
5
6
7
8
9
10
11
12

检测是否引入成功

1. 在 test.scss (自己新建的) 中写入

   $red:red;
   1

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

   <template>
   	<div class="text-color">Hello world</div>
   </template>
   
   <style lang="scss">
   .text-color{
   	color: $red;
   }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9

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