vite.config.ts配置全局scss

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vite.config.ts配置全局scss相关的知识,希望对你有一定的参考价值。

参考技术A global.scss :

helloPage.vue :

CSS 预处理器

vite配置scss无效问题

参考技术A

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

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

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

写入样式内容:

安装sass

修改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配置,具体原理尚未搞清,在此给遇到此问题的新手一个解决参考。

以上是关于vite.config.ts配置全局scss的主要内容,如果未能解决你的问题,请参考以下文章

vue/ts 新建项目时好用的配置 vite.config.tstsconfig.json

vite.config.ts 配置proxy

vite下部分插件使用

vue3项目中配置vite.config.ts时使用path模块报错

vue3中vite的配置

Vite-Ts框架搭建