老项目中的node-sass替换为dart-sass历程

serendipity_tang
5,272 阅读4分钟

彻底解决 node node-sass sass-loader版本兼容问题

1、直接放弃node-sass，使用dart-sass无缝替换。

node-sass与dart-sass区别：

  • node-sass 是用 node (调用 cpp 编写的 libsass) 来编译 sass。
  • dart-sass 是用 drat VM 来编译 sass。
  • node-sass 是实时自动编译的，dart-sass 需要保存后才会生效。
  • 推荐 dart-sass 性能更好（也是 sass 官方使用的），除了上面的版本对应不上，
  • 很多时候node-sass还因为国情问题经常装不上。

具体的切换方法：

1、卸载 node-sass npm uninstall node-sass

2、安装 dart sass npm install sass sass-loader -D

如果你按照上面这么干，你可能没有问题，也可能会有问题

比如Syntax Error: TypeError: this.getOptions is not a function

image.png

解决方案：

  1. 确保你的 webpack 版本与 sass-loader 版本兼容。如果你的 webpack 版本太旧，可能不支持新版 sass-loader 的某些特性。
  2. 如果你正在使用 webpack 4，请确保安装了 sass-loader 的相应版本，即 7.x 或更低版本，因为 webpack 4 不兼容 sass-loader 的 8.x 版本。
  3. 如果你正在使用 webpack 5，那么应该安装 sass-loader 的 9.x 版本，因为这个版本支持 webpack 5。
  4. 确保 sass-loader 的依赖在 package.json 文件中是正确安装的，并且没有版本冲突。
  5. 检查 webpack 配置文件中的 sass-loader 配置。确保没有语法错误，比如错误的缩进、不正确的选项传递等。
  6. 如果你是通过命令行安装的，请尝试清除 node_modules 目录和 package-lock.json 文件（或 yarn.lock 如果你使用 yarn），然后重新运行安装命令。
  7. 如果以上步骤都不能解决问题，可以尝试删除 node_modules 目录和 package-lock.json 文件（或 yarn.lock），然后更新 npm 到最新版本或者更换 npm 为 yarn 进行安装。

更新依赖和webpack版本，确保兼容性，并且仔细检查配置文件，通常可以解决这个兼容性问题。

下图是我这个项目中使用的版本：

image.png

在启动项目的时候会遇见如下警告，虽然不影响代码运行 ，但是看着很不舒服
  1. 第一种警告

image.png

警告内容解释

  • Deprecation Warning: 表示这是一个废弃警告，意味着在未来的版本中，某些行为将会改变。
  • Sass's behavior for declarations that appear after nested rules: 这指的是在嵌套规则之后出现的声明。
  • will be changing to match the behavior specified by CSS: 表示Sass将改变其行为，以匹配CSS规范中的行为。
  • To keep the existing behavior: 如果你希望保持当前的行为，需要将声明移动到嵌套规则之前。
  • To opt into the new behavior: 如果你希望采用新的行为，可以将声明用& {}包裹起来。

看到这里应该会修改了

  • 方法一：声明移动到嵌套规则之前

image.png

  • 方法二：将声明用& {}包裹起来

image.png

  • 方法三：将sass版本固定到1.77.6之前

版本是在1.77.7开始的。 可以固定sass的版本在1.77.6之前。

npm install sass@1.32.13

  1. 第二种警告

image.png

这是element UI 的文件，我们可以暂时性的修改，但是治标不治本，简单的方法就是降低sass的版本

这里推荐 npm install sass@1.55.0

在低版本的sass中以上两种警告都不会出现，推荐使用相对低版本的sass

  1. 第三种警告

我为什么会在上面推荐 1.55.0 版本呢，因为这个版本会抛第三种警告

image.png

大概意思是：不推荐在calc（）之外使用/进行除法，并将在Dart Sass2.0.0中删除

解决:

有三种方式可以解决，前两种是警告里面给出的方法。

    /*改之前*/
    border-radius:$button-height / 2
  • 方法一：sass:math

用sass:math中的math.div来进行除法

/*使用sass:math*/
@use "sass:math";
border-radius:math.div($button-height,2);

在scss文件头部引入 @use “sass:math”; 把用到除法的地方换成math.div(参数1， 参数2)

  • 方法二 calc
/*使用calc*/
border-radius:calc($button-height / 2);

/ 号两边要有空格

  • 方法三 降低 sass 版本

降到了 sass@1.32.13 ，报错就没有了

npm uninstall sass
npm install sass@1.32.13 -D

所以最终我这边确定的版本是

image.png

image.png

最后的最后

需要全局替换一下/deep/，全局搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep

2、继续使用node-sass

node 版本与 node-sass 版本的对应关系

1、可自行查看node-sass官方文档

2、可参考下面的表格

image.png

node-sass 和 sass-loader 的版本对应关系， 要查看 node-sass 和 sass-loader 的各个版本的对应关系，可以参考以下表格：

node-sass 版本sass-loader 版本
^6.0.0^10.0.0
^5.0.0^10.0.0
^4.0.0^8.0.0
^3.0.0^7.0.0
^2.0.0^4.0.0
^1.0.0^2.0.0

上面这张表格因为没在官网找到对应的说明，所以不一定准确

如果你使用 npm，可以使用以下命令来查看：

npm view sass-loader peerDependencies

image.png

这些命令将显示 node-sass 和 sass-loader 的 peerDependencies，其中包括它们所需的其他依赖项和版本范围

avatar
文章
阅读
粉丝