vite2+vue3引入scss不支持:export

Posted 2023-03-24

参考技术A 最近在研究vite+vue3，在升级的过程中发现，vite内置的scss预处理器不支持:export语法。import
导入的scss文件，console.log显示是编译过后的整个css文件的内容。

vue-cli构建的项目不存在问题，与webpack有关

查看官方 issue ，尤大大说‘可能不会支持任何超出当前预处理器支持范围的东西。使用CSS模块代替。’

创建 var.module.scss 文件

在 app.vue 文件中引入

浏览器打印的结果是

页面调用(vue2的用法)

效果图：

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