Syntax Error: SassError: expected selector /deep/

问题描述

• 有一个老项目，项目中用到了sass作为css预处理器
• 当需要穿透修改（子）组件的样式的时候
• 发现不能识别/deep/的语法，换成::v-deep也不行

报错截图举栗子如下：

网上有很多稀奇古怪的解决方案，笔者逐一尝试，发现都不行......

解决方案

• 既然sass语法不能使用，那就不用了呗（也不用升级版本）
• 直接改成用node-sass进行编译css即可
• 直接修改package.json文件中的依赖，再删除node_modules文件夹
• 再npm cache clean -f
• 再重新安装依赖yarn install即可解决问题

原来的package.json依赖

去除sass依赖

请看第八行

  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "sass": "^1.25.0", // 这个不要了哦
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },

新的package.json依赖

换成node-sass依赖

请看第八行

  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "node-sass": "^4.9.0", // 换成这个即可
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.11"
  },

至于node-sass和sass-loader的版本，大家去npm上，看哪一个下载量多，合理适当自行选择

A bad pen is better than a good memory...