vite配置scss无效问题
如何生成vite的vue项目,网上教程已经有很多,在此就不多说了,在此聊一聊在刚接触vite时,配置scss所遇到的问题。首先执行初始化项目命令,并安装依赖,运行项目:npm init @vitejs/app vite-testcd vite-testnpm installnpm run dev写入样式内容:body {background-color: pink;color: orange;}安
·
如何生成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配置,具体原理尚未搞清,在此给遇到此问题的新手一个解决参考。
更多推荐
已为社区贡献6条内容
所有评论(0)