原文网址：Scss--将node-sass切换为sass(原dart-sass)_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍node-sass与sass（原dart-sass），以及如何将node-sass切换为sass（原dart-sass）。

sass依赖原来是dart-sass，是为了与node-sass区分的。后来官网将node-sass废弃了，就一同将dart-sass改名为了sass。

相关图片

npm图片

node-sass与sass的对比

项	node-sass	sass
与Node.js的兼容性	不兼容高版本Node.js	兼容高版本Node.js
性能	高	稍低于node-sass
官方推荐度	不推荐（已废弃）	推荐
编译方法	用 node(调用 c++ 编写的 libsass)编译 sass。自动实时编译。	用 drat VM 来编译 sass。保存后生效

为什么要从node-sass切换到sass

sass是官方推荐的
1. node-sass已被官方废弃
sass对Node.js的兼容性更好
1. Sass兼容高版本的Node.js，而node-sass不兼容高版本Node.js
vue-cli已默认使用sass
1. 详见：https://github.com/vuejs/vue-cli/pull/3321
很多前端框架用的是sass
1. 例如：vue-element-admin。见：Node Sass to Dart Sass | vue-element-admin

从node-sass切换到sass的方法

1.修改依赖

卸载node-sass

npm uninstall node-sass

安装sass

npm install sass -S -D

2.修改代码

说明

对于深度选择器 /deep/和::v-deep:

sass 只支持 ::v-deep
node-sass 支持 /deep/和::v-deep

所以，要将原来的/deep/改为::v-deep。

示例

node-sass写法（老写法）

.a {/deep/ {.b {color: red;}}
}

sass写法（新写法）

.a {::v-deep {.b {color: red;}}
}

::v-deep的简写

::v-deep的简写是下边这样的：

:deep(selector)

例如：

:deep(.foo) {position: relative;
}

备注

不管你是否使用dart-sass，我都建议使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法。而且它还是 vue 3.0 RFC 中指定的写法。

而且 /deep/ 写法本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用/deep/的警告。

版本问题

scss（dart-sass）的兼容性很强，一般不会出问题。不过为保险起见，本处记下一些测成功的版本，供参考。

node.js	webpack	sass	sass-loader
14.15.3	4.46.0	1.26.2	8.0.2

Scss--将node-sass切换为sass(原dart-sass)相关推荐

【Sass/SCSS】我花4小时整理了的Sass的函数
[Sass/SCSS]我花4小时整理了的Sass的函数博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...
浅谈node环境下的Sass以及gulp工具下的Sass
目录一.Sass简介二.Sass的解析器 1. node环境下的Sass解析器 2. gulp工具下的Sass解析器三.Sass语法 1. 注释 2. 变量 3.嵌套 4.导入@import 5 ...
sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
【VSCode】【Sass】在vscode中使用sass
效果展示在文件夹下新建.scss文件,保存后将自动生成.css文件安装过程 ✨ 配置node.js环境,具体请看我的这篇教程传送门安装sass模块 cmd npm i -g sass 在vsco ...
node n 切换node版本失败_记一次 node-sass@4.x 安装失败
今天在维护一个基于 vue-cli 创建的旧项目,在安装依赖时会报错,具体信息如下: gyp ERR! stack Error: spawn C:Program Files (x86)Microsof ...
[Sass常见用法] Css代码的Sass打开方式
文章目录 Sass Sass是什么(英文全称:Syntactically Awesome Stylesheets) 为什么使用 Sass 数组混合器 sass安装及用法实例 sass的安装在开发软 ...
【Sass】437- 一文详解Sass新特性 - 模块
本文来自[前端早读课],内容不错,推荐给大家. 前言原来是今年才推出的.今日早读文章由@十方魔投稿分享. 正文从这开始-- 简介 2019年十月一号,sass团队推出了sass的模块化机制,通过新关 ...
记一次升级node版本后，运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
android切换原唱伴唱,切换伴奏和原声/设置KTV播放列表
三. 灵活切换伴奏和原声当酷我音乐盒开始播放歌曲的KTV后,切换到"正在播放"窗口就可以欣赏到原版的KTV画面了,默认情况下播放的是原人原唱.如果要切换到伴奏声道,唱卡拉OK时, ...
Node快速切换版本、版本回退(降级)、版本更新(升级)
解决方案一(n) n github地址: https://github.com/tj/n 全局安装n npm install -g n 安装最新稳定版 node n stable 安装最新版本 nod ...

Scss--将node-sass切换为sass(原dart-sass)

简介