# Node Sass to Dart Sass
在`v4.3.0`之前本項目都是基于`node-sass`進行構建的，但`node-sass`底層依賴[libsass](https://github.com/sass/libsass)，導致很多用戶安裝的特別的困難，尤其是 windows 用戶，它強制用戶在`windows`環境中必須安裝`python2`和`Visual Studio`才能編譯成功。
所以為了解決這個問題，本項目在[v4.3.0](https://github.com/PanJiaChen/vue-element-admin/pull/3040)修改為`dart-sass`進行構建，它能在保證性能的前提下大大簡化用戶的安裝成本。通過這個[issue](https://github.com/PanJiaChen/vue-element-admin/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)下面相關的評論就可以知道，安裝`node-sass`是多么麻煩的一件事。
這里選擇使用`dart-sass`還有一個更主要的原因，`sass`官方已經將`dart-sass`作為未來主要的的開發方向了，有任何新功能它都是會優先支持的，而且它已經在社區里穩定運行了很長的一段時間，基本沒有什么坑了。`dart-sass`之所以容易安裝，主要是因為它會被編譯成純 js，這樣就可以直接在的 node 環境中使用。雖然這樣它的運行速度會比基于[libsass](https://github.com/sass/libsass)的慢一些些，但這些速度的差異幾乎可以忽略不計。整個社區現在都在擁抱`dart-sass`，我們沒有理由拒絕！而且它的確大大簡化了用戶的安裝成本。
目前`vue-cli`在選擇`sass`預處理的時候也會默認優先使用`dart-scss`，相關[pr](https://github.com/vuejs/vue-cli/pull/3321)
相關的說明可以見該篇文章：[Announcing Dart Sass](https://sass-lang.com/blog/announcing-dart-sass)
具體`dart-sass`性能評測可見：[Perf Report](https://github.com/sass/dart-sass/blob/master/perf.md)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/sass.html#%E5%8D%87%E7%BA%A7%E6%96%B9%E6%A1%88)升級方案
升級也非常的簡單，只需要兩個步驟
~~~
npm uninstall node-sass
npm install sass -S -D
~~~
具體可見該：[Pull Request](https://github.com/PanJiaChen/vue-element-admin/pull/3040)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/sass.html#%E4%B8%8D%E5%85%BC%E5%AE%B9)不兼容
替換`node-sass`之后有一個地方需要注意，就是它不再支持之前`sass`的那種`/deep/`寫法，需要統一改為`::v-deep`的寫法。相關：[issue](https://github.com/vuejs/vue-cli/issues/3399)
具體 demo：
~~~
.a {
/deep/ {
.b {
color: red;
}
}
}
/* 修改為 */
.a {
::v-deep {
.b {
color: red;
}
}
}
~~~
不管你是否使用`dart-sass`，我都是建議你使用`::v-deep`的寫法，它不僅兼容了 css 的`>>>`寫法，還兼容了 sass`/deep/`的寫法。而且它還是[vue 3.0 RFC](https://github.com/vuejs/rfcs/blob/scoped-styles-changes/active-rfcs/0023-scoped-styles-changes.md)中指定的寫法。
而且原本`/deep/`的寫法也本身就被 Chrome 所廢棄，你現在經常能在控制臺中發現 Chrome 提示你不要使用`/deep/`的警告。
更多：[scope css 寫法](https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F)
[在 GitHub 上編輯此頁](https://github.com/PanJiaChen/vue-element-admin-site/edit/master/docs/zh/guide/advanced/sass.md)
