使用dart-sass替换node-sass

如果你使用过 sass ，应该了解多年来 node-sass 一直是 JavaScript 社区里的主流选择，它实际上只是 libsass 在 node 环境下的一个 wrapper， 编译 sass 文件的实际工作是 libsass 完成的。

在使用 node-sass 过程中我们经常会遇到很多问题，不同平台上有各种各样的问题，python版本的问题，node-gyp的问题，node.js的版本问题等等，甚至因为国内网络的问题等等，导致不管是部署还是多人开发都遇到了多多少少的问题，所以官方现在推荐用dart-sass来作为编译器。

现在，sass 官方已经使用 dart-sass 作为 sass 的主要实现，下面是官方的一段话：

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

替换方案1：

// 使用别名代替
npm install node-sass@npm:dart-sass -D

替换方案2：

npm uninstall node-sass -D
npm i sass sass-loader -D

然后在webpack配置

{
  test: /\.(sa|sc)ss$/,
  loader: 'sass-loader',
  options: {
    // 使用dart-sass代替node-sass
    implementation: require('sass'),
  },
};

注意，如果使用vue开发的话需要用::v-deep代替/deep/和>>>来进行样式穿透，否则会报错。

/* 之前的写法 */
.container {
  /deep/ {
    a {
      color: red;
    }
  }
  >>> {
    .b {
      color: blue;
    }
  }
}

/* 需要修改为 */
.container {
  ::v-deep {
    a {
      color: red;
    }
  }
  ::v-deep {
    .b {
      color: blue;
    }
  }
}

这样就不会遇到安装node-sass的各种安装失败问题了。