vue-cli 3中dart-sass替换node-sass

Posted 2022-12-05 胖鹅68

文章目录

• 一、问题描述
• • 1.1 nodejs12 升级 nodejs16
  • 1.2 将node-sass改为 dart-sass
• 二、dart-sass VS. node-sass
• • 2.1 node-sass
  • 2.1 将node-sass替换为dart-sass

一、问题描述

最近在学习Vue3，使用vue-cli4.x 创建的工程，在使用sass的时候，一直报错，提示API 不兼容。

1.1 nodejs12 升级 nodejs16

启动项目的时候，提示nodejs 版本过低，自己本机是nodejs12。 想着nodejs只是用webpack来编译打包，使用新特性应该会往下兼容，于是从官网下载了最新的版本，从nodejs12升级到nodejs16。

升级完了之后，提示nodejs 版本过高，整个人都不好了。去网上找了解决办法，大概意思 —— nodejs的版本是需要跟node-sass 要有对应的，按照网上的要求，安装了几个 node-sass版本，都还是不兼容。

1.2 将node-sass改为 dart-sass

突然想到使用vue-cli4.x 创建工程的时候，会提示选择 node-sass 还是 dart-sass， 出于好奇，想了解两个的区别，于是再网上搜索到了结果，使用 dart-sass 替换 node-sass,

dart-sass 是官方推荐的

二、dart-sass VS. node-sass

2.1 node-sass

• node-sass底层依赖libsass，是C/C++语言开发的
• 安装问题比较多,主要是nodejs版本兼容的问题
• Windows环境使用的时候必须有python2和vs才能编译成功

node-sass vue-cli环境安装

npm i -D node-sass sass-loader
dart-sass

dart-sass vue-cli环境安装

npm i -D sass sass-loader

2.1 将node-sass替换为dart-sass

为什么要替换?

• node-sass仓库在墙外, 且新特性都会先在dart-sass实现
• dart-sass 安装没有兼容性问题

卸载node-sass

// npm
npm uninstall node-sass

// yarn
yarn remove node-sass

添加sass

// npm 
npm install --dev sass

// yarn
yarn add sass --dev