vue-element-template优化升级dart-sass、pnpm

彭世瑜2024-05-13 23:01

1、替换 node-sass 为 dart-sass

json 复制代码

- "node-sass": "^4.9.0",
+ "sass": "^1.75.0",

替换css深度作用域写法

bash 复制代码

/deep/
>>>

# 替换为

::v-deep

Vue：Node Sass VS. Dart Sass

升级之后发现有很多语法警告

可以采用降低的sass版本的方式处理

js 复制代码

// 上面的写法表示 1.32.6 ~ 1.32.x 都可以使用，1.33.0以上的版本才被禁止。
"sass": "~1.32.6"

ref: SASS的禁用警告 Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

2、替换npm为pnpm，需要补充一些依赖，否则打包会报错

json 复制代码

{
  "private": true,
  "dependencies": {
    "qs": "6.5.3",
  },
  "devDependencies": {
    "core-js": "2.6.12",
    "vue-style-loader": "4.1.3",
    "cache-loader": "2.0.1",
    "regenerator-runtime": "0.14.0",
    "thread-loader": "2.1.3",
    "babel-loader": "8.3.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "@vue/babel-preset-app": "3.12.1",
    "css-loader": "1.0.1",
    "url-loader": "1.1.2",
    "vue-loader": "15.10.2",
    "postcss-loader": "3.0.0",
    "svg-baker-runtime": "1.4.7",
  }
}