关于vite项目配置scss预处理时的路径问题今天在配置自己的项目的时候，好不容易把一些工程化配置配好之后，跑一跑发现报

今天在配置自己的项目的时候，好不容易把一些工程化配置配好之后，跑一跑发现报错了，原因竟然是无法解析scss文件路径当时不记得截图，反正大概的意思就是直接把“@”符号没有经过替换就使用了

然后发现了两个问题

第一个问题是scss和sass是一样的，只是后缀不同，插件使用sass就可以了，不需要下载scss

pnpm install sass --save-dev // 安装sass

然后就是为什么不能解析@为/src的原因了（附上alias配置）

alias: {
    "@": pathResolve("./src"),
},

首先我当前的版本是默认最新版的，然后使用如下配置就会报错

// 配置css预处理
css: {
    preprocessorOptions: {
        scss: {
            javascriptEnabled: true,
            // scss版本太高就无法使用@
            additionalData: '@import "@/styles/variables.scss";', // eslint-disable-line
        },
    },
},

报错信息是无法解析路径（大概是这个意思），然后指出代码片段，对这一行进行标红

@import "@/styles/variables.scss";

会发现没有解析@

后来上网查了很多资料，终于找到了解决办法，是因为版本太高了，于是将sass进行降级就好了

pnpm install sass@1.32.6 --save-dev

到此为止问题就解决啦