vue-cli 项目添加对 scss 支持!2021年12月1日实测最佳搭配版本!

在这篇博文开始之前,我需要提前补充一条,前面又发布过一篇博文:vue-cli 添加 scss/sass 及 less 支持,有需要可以自取!,如果已经能满足你的需求并且项目可以正常运行,个人建议是不要一味的追求新版本,新搭配新组合;毕竟如果是公家项目需要稳定,Vue3都出来多久了,本人坐标合肥可以说90%的公司都还是Vue2。当然如果你个人项目那随便折腾!

直入正题

截止到目前实测,最佳搭配版本是 node-sass@6 + sass-loader@10,当然你闲的蛋疼的你可以自己再往上尝试搭配版本!

版本号都提供了,装就都会了吧!三种方式,根据自己需求选择即可!

NPM 方式

咋说了,最好的“原厂”方式,但是由于众所周知的原因,速度不理想;有网络条件的可以试,毕竟原厂!

npm install node-sass@6 sass-loader@10

CNPM 方式

淘宝国内镜像源,大多数人用的方式,官网网站:https://cnpmjs.org/

npm install node-sass@6 sass-loader@10

Yarn 方式

相当于一个NPM过渡到CNPM的均衡版本,好处就是对NPM加速,同时优化了CNPM的下载逻辑;CNPM是硬拉包,比如你有两个项目,都有vue,且版本一致的话;如果使用cnpm方式安装依赖包,等于下2份;如果使用yarn,则只会下载一次,因为第二次就直接从你本地离线拷贝一份;简单来说就是cnpm实时下载,你有100个项目,就下载100次,不管这个项目依赖包是否是一样的;yarn只下载一次,包在装到项目后会同时在本地的“仓库”存一份,下次再用相同的包就直接从本地拷贝一份过去,就等于是个缓存的概念!

yarn add node-sass@6 sass-loader@10

分享配置

当然,为了方便各位排错误,下面是我本地正确且实测可用的包配置文件内的版本配置信息!

{
  "dependencies": {
    "node-sass": "^6.0.1",
    "sass-loader": "10"
  }
}

成功水完一篇博文!完结散花!