如何生成vite的vue项目,网上教程已经有很多,在此就不多说了,在此聊一聊在刚接触vite时,配置scss所遇到的问题。

首先执行初始化项目命令,并安装依赖,运行项目:

 npm init @vitejs/app vite-test 
 cd vite-test 
 npm install
 npm run dev

创建src/assets/styles/test1.scss文件

在这里插入图片描述

写入样式内容:

body {    
	background-color: pink;    
	color: orange;
}

安装sass

npm install sass -D

修改vite.config.ts配置文件,配置引入scss

在这里插入图片描述

此时发现页面并未应用样式

在这里插入图片描述

然后创建src/assets/styles/test2.scss文件,并在main.ts入口文件引入

在这里插入图片描述

如果你的项目遇到了此类报错,或者其他莫名其妙的报错

在这里插入图片描述

可能是因为sass版本过高导致的。

卸载sass,试试安装版本低一些的sass。

本次示例使用的sass@1.32.6版本。

当在main.ts中引入后,发现在vite配置引入的scss样式应用成功。

在这里插入图片描述

可能是项目中引用scss文件时才会触发vite的scss配置,具体原理尚未搞清,在此给遇到此问题的新手一个解决参考。

Logo

前往低代码交流专区

更多推荐