SASS的 CSS语法/deep/报错：SassError: expected selector.解决

打开一个vue项目，里面有SASS语法，其中CSS里用到/deep/，发现编译报错，如下：

 ERROR  Failed to compile with 1 errors                                                                                                                      10:34:52 AM

 error  in ./src/components/floatBtn.vue?vue&type=style&index=0&id=cacbdb20&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected selector.
    ╷
277 │     /deep/ .hover-area{
    │     ^
    ╵
  src/components/floatBtn.vue 277:5  root stylesheet

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/floatBtn.vue?vue&type=style&index=0&id=cacbdb20&lang=scss&scoped=true& 4:14-463 14:3-18:5 15:22-471

package.json中有引入sass-loader:

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "sass": "^1.45.0",
    "sass-loader": "^10.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }

问题解决，修改/deep/写法，改成::v-deep，就能解决问题。

//原来这样写
/deep/ .hover-area {
  position: absolute;
  width: 100px;
  height: 100%;
}

//改成这样
::v-deep .hover-area {
  position: absolute;
  width: 100px;
  height: 100%;
}