element2.x vue-cli3 node-sass改da

因实际项目中安装node-sass会造成开发人员首次构建项目的时候非常的麻烦，现将弃用node-sass，改用dart-Sass，这并不会有太多影响之前的代码

前言

Sass 有三个版本 Dart Sass、libsass 和 Ruby Sass：

• Dart Sass：用 Dart 语言写的 sass 实现，于2016年11月1日发布 alpha 版本，版本1.23.0之后完全支持模块化机制。
• libSass 也就是俗称的 node-sass，用 c/c++ 实现的 sass 版本，使用广泛，其中 node-sass 是绑定了 libsass的 nodejs 库，可以极快的将 .scss 文件编译为 .css 文件，安装过程很慢，官方也不推荐再使用了。
• Ruby Sass 是最初的 Sass 实现，但是2019年3月26日被停止了，以后也不会再支持，使用者需要迁移到别的实现上
• Sass 官方团队在2020年10月也正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass，主要有以下几点说明：

不再建议将 LibSass 用于新的 Sass 项目， 改为使用 Dart Sass。

建议现有的 LibSass 用户制定计划，最终迁移到 Dart Sass，并且所有 Sass 库都制定计划，最终放弃对 LibSass 的支持。

不再计划向 LibSass 添加任何新功能，包括与新 CSS 功能的兼容性。

LibSass 和 Node Sass 将在尽力而为的基础上无限期维护，包括修复主要的错误和安全问题以及与最新的 Node 版本兼容。

为什么使用 Dart Sass

目前 Dart Sass 已经作为 Sass 最新的版本了，当执行 npm install sass -D 默认使用的是 Dart Sass 包，vue-cli、Vite 脚手架默认也是使用最新版本 Dart sass，而且不需要安装 node-sass【之前安装 node-sass 经常失败】

另外，element-v2.15.7和element-plus 组件库也是使用 dart dass 模块的 sass:map 和 @use 重构了所有的 SCSS 变量，解决了由 @import 造成的重复输出问题。

所以，为了获得 sass 提供更多更强大的功能，强烈推荐使用 dart sass

安装使用

1.如果之前安装了 node-sass，可以先卸载

npm uninstall node-sass

安装 dart-sass

npm install sass sass-loader -D

2.配置 vue.config.js 文件

// 一般默认文件里是没有这个css配置的, 添加进去就好.
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
    },
  }
 } 

如果版本过高导致报错，如提示 TypeError: this.getOptions is not a function，退回 10.+ 可以运行成功

npm uninstall sass-loader  
npm install sass-loader@^10.1.1 -D

如果项目之前用到 /deep/ 需要替换为 ::v-deep，全局搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep

element2.x目前只有2.15.7版本是dart-sass。所以之前低于2.15.7可直接升到这个版本；

如果目前版本是高于2.15.7不建议降低版本

npm uninstall element-ui 
npm install element-ui@2.15.7

如果目前版本是高于2.15.7不建议降低版本，可参考以下方案：

部分项目因为element过高或过低，但不能改动element版本的，可能还是会warm(不影响运行)

推荐版本
"sass": "1.26.2",
"sass-loader": "^7.3.1",

npm uninstall sass-loader sass 
npm install sass-loader@7.3.1 sass@1.26.2

项目中使用了stylelint , 可能需要修改下校验规则，在stylelint.config.js 代码如下

module.exports = {
  rules: {
    'selector-pseudo-element-no-unknown': [ true,
      {
        ignorePseudoElements: ['v-deep'],
      }
    ],
  },

element的主题warm方案二

手动批量修改（不推荐，以上方案改好正常不需要以下操作）
1.安装sass-migrator，

npm install sass-migrator -D

2.在package.json的scripts里添加命令，

"sass-migrator": "sass-migrator division node_modules/element-ui/packages/theme-chalk/src/*.scss"

3.最后执行

npm run  sass-migrator