Node升级导致 node-sass 项目依赖报错

node-sass 升级为 dart-sass报错问题

• 在对 Nodejs v14.18.2 版本升级到 Nodejs v16.14.2 版本后启动Vue项目报错，因为原项目中使用node-sass，而node-sass是用 node (调用 cpp 编写的 libsass) 来编译 sass，对 node 版本有一定固定要求，而在这里我们改用dart-sass，而dart-sass 是用 drat VM 来编译 sass，也是官网主推的Sass编译方式，需要进行如下操作：

1. 使用命令 yarn remove node-sass sass-loader 移除原有 node-sass CSS预处理

2. 重新安装 yarn add sass@1.32 sass-loader@10.0.5 -D

3. 修改 vue.config.js 中的 scss 全局引入，将 data 修改为 additionalData

module.exports = {
css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/sass/scss-variable.scss";`,
      },
    },
  },
}

4. 将程序代码中的 /deep/.className{} 穿透写法，修改为 ::v-deep.className{} 或者 :deep(.className){} 的方式进行穿透修改样式