node-sass更换为dart-sass

nodes-sass更换为sass(dart-sass)

"sass": "^1.70.0",

"sass-loader": "^7.1.0",

原因

2020年10月27日,Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。如果在vue脚手架搭建的项目中需要使用sass,建议初始化时勾选sass配置,自行安装,选择默认的就是dart-sassdart-sass替代node-sass根本原因:node-sass无法下载特定版本的二进制依赖文件。

dart-sass使用前需要注意几点:

  • dart-sassnode-sass都是用来将sass编译成css的工具,所以都依赖sass-loader。但node-sassnode.js 版本相关联,这就导致,一旦本地 node.js 升级,就会出现 node-sass 无法工作的情况
  • npm 上的 dart-sass 包已被弃用,直接更名为 sass
  • dart-sass 不支持/deep/,要改成::v-deep

安装dart-sass

卸载node-sass

arduino 复制代码
yarn remove node-sass

安装dart-sass

csharp 复制代码
yarn add sass -D

dart-sass与node-sass的区别

  • node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass
  • dart-sass 是用 drat VM 来编译 sass
  • node-sass是自动编译实时的,dart-sass需要保存后才会生效
  • dart-sass 性能更好(也是 sass 官方使用的),而且 node-sass依赖node版本,所以会出很多问题(node-sass:4.14.1,node:14.19.3可以正常使用,mac本node-sass依赖python3,装机默认是python2.7,所以还需要下载python3)

sass 有6个实现,他们都是用来将sass编译成css的工具。

下边我们来专门说一下 sassdart-sassnode-sass

  • sass 是由 ts调用 dart-sass实现的工具类,来编译 sass(以前是由单纯的 ts实现的)
  • dart-sass 是由 dart 实现的,通过 dart vm 运行 dart 是编译 sass(在 npm 可以看到该包已不被开放下载了),直接更名为sass
  • node-sass 是由 node 调用 底层 c++ 实现的 libsass 来编译 sass

目前sass官方主推的是 dart-sass

dart-sass优势

  • 不存在依赖二进制文件即可完成安装,避免了node-sass因为依赖其他文件而失败
  • 允许使用sass和css新特性
  • 避免工程其他依赖升级的不兼容node-sass导致报错的问题

dart-sass缺陷

  • 性能:由于node-sass使用C++实现的样式预处理器,速度相比于纯Javascript实现Dart Sass要快
  • 内存:执行编译过程中,Node Sass的内存占用也比Dart Sass要小很多

踩坑记录

(1)在写css中使用/出的错

css语法里面已经添加了/作为分隔符的使用。sass作为css的超集,也会跟进这个改动,所以sass2.0的时候 /就会被弃用。 但是在calc函数里面仍然是有效的,也就是说,我们以后用除法的时候,直接在calc函数里使用,或者除2的时候改成*0.5就没有问题了。本来css就是只在calc支持除法,所以问题不大。 官方给出的解决办法是math.div()方法,当然官方不会让你一个一个修改,给出了批量修改工具。

安装sass-migrator

js 复制代码
yarn add -g sass-migrator

批量修改

js 复制代码
sass-migrator division **/*.scss

编译之前

js 复制代码
margin-right: #{$--tooltip-arrow-size/0.55};

编译之后

js 复制代码
margin-right: #{math.div($--tooltip-arrow-size, 0.55)};

(2)SassError: expected selector. /deep/

在写css中使用/deep/出的错,将/deep/替换成::v-deep即可。

深度选择器 /deep/::v-deep:

  1. sass 只支持 ::v-deep
  2. node-sass 支持 /deep/::v-deep

全局搜索项目中的/deep/ 然后全部替换成::v-deep

(3)calc在特定情况需要带单位

调整前

js 复制代码
 width: calc(100% - 215);

调整后

js 复制代码
 width: calc(100% - 215px);

(4)each中循环的变量写法

主演是将&-#{$name}调整为&-#{""+$name}

调整前

js 复制代码
@each $name,
$color in $bright-colors {
    &-#{$name} {
        background-color: $color;
        border: p2r(1) solid $color;
        color: lighten($color: $color, $amount: 100%);

        .iconfont {
            color: lighten($color: $color, $amount: 25%);
        }

        &:hover {
            background-color: darken($color: $color, $amount: 10%);
        }
    }

}

调整后

js 复制代码
@each $name,
$color in $bright-colors {
    &-#{""+$name} {
        background-color: $color;
        border: p2r(1) solid $color;
        color: lighten($color: $color, $amount: 100%);

        .iconfont {
            color: lighten($color: $color, $amount: 25%);
        }

        &:hover {
            background-color: darken($color: $color, $amount: 10%);
        }
    }

}
相关推荐
前端大白话14 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
一个天蝎座 白勺 程序猿1 小时前
Python爬虫(4)CSS核心机制:全面解析选择器分类、用法与实战应用
css·爬虫·python
sunbyte8 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
鹿九巫13 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
HuaHua的世界17 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
鹿九巫17 小时前
【CSS】层叠,优先级与继承(三):超详细继承知识点
前端·css
AXUI17 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html
末日的狂欢姐17 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html·reset·normalize
LAOLONG-C19 小时前
今日CSS学习浮动->定位
前端·css·css3
小桥风满袖21 小时前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js