use `/deep/ ` syntax in style tag is not work?

[caoxiemeihao]

My codes.

<style lang="scss" scoped>
.insurance-item {
  /deep/ .el-form-item__content {
    display: flex;

    .insurance-item__select {
      width: 150px;
    }

    .insurance-item__input {
      flex: 1;
      white-space: nowrap;

      label {
        display: inline-block;
        font-size: 12px;
        width: 30px;
        text-align: center;
        margin: 0 12px;
      }

      .el-input {
        width: 80px;
      }
    }
  }
}

.insurance-item .el-form-item__content .insurance-item__input .is-precise label {
  width: auto;
}

.is-precise {
  float: right;
}

.el-textarea {
  width: 284px;
}

.insurance-tips {
  color: #999;
  font-size: 12px;
  line-height: 16px;
  margin-left: 36px;
}
</style>

vite.config.ts

/* eslint-disable */
import path from 'path'
import { defineConfig } from 'vite'
// 必选 * vite 支持 vue2 官方插件
import { createVuePlugin } from 'vite-plugin-vue2'
// 可选 - 兼容 CommonJs 写法
import { vitePluginCommonjs } from 'vite-plugin-commonjs'
import {
  // 必选 * 读取 public/index.html
  template,
  utils,
} from 'vite-plugin-vue2-compatible'

export default defineConfig({
  plugins: [
    createVuePlugin({
      jsx: true,
      jsxOptions: {
        compositionAPI: true,
      },
    }),
    vitePluginCommonjs(),
    template(),
  ],
  resolve: {
    alias: [
      { find: '@', replacement: path.join(__dirname, 'src') },
      { find: /* ~/ *//^~(?=\/)/, replacement: path.join(__dirname, 'node_modules') },
      { find: /* ~ *//^~(?!\/)/, replacement: path.join(__dirname, 'node_modules/') },
    ],
    // 同 webpack 中的 extensions
    extensions: utils.DEFAULT_EXTENSIONS,
  },
  define: {
    // 同 webpack.DefinePlugin
    'process.env': process.env,
  },
  optimizeDeps: {
    include: [
      'lottie-web'
    ],
  },
})

Console errors.

➜  AppTradePlatformWeb git:(release/vite) npm run start

> AppTradePlatformWeb@0.1.0 start /Users/atom/Desktop/hello/AppTradePlatformWeb
> export VUE_APP_ENV=fat; export NODE_ENV=development; vite

  vite v2.5.6 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 393ms.

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
5:51:17 PM [vite] Internal server error: expected selector.
    ╷
510 │   /deep/ .el-form-item__content{
    │   ^
    ╵
  src/views/insurance/addDialog/index.vue 510:3  root stylesheet
  Plugin: vite:css
  File: /Users/atom/Desktop/hello/AppTradePlatformWeb/src/views/insurance/addDialog/index.vue
  Error: expected selector.
      ╷
  510 │   /deep/ .el-form-item__content{
      │   ^
      ╵
    src/views/insurance/addDialog/index.vue 510:3  root stylesheet
      at Object._newRenderError (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:13472:19)
      at Object._wrapException (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:13315:16)
      at _render_closure1.call$2 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:79617:21)
      at _RootZone.runBinary$3$3 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:27035:18)
      at _FutureListener.handleError$1 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25563:19)
      at _Future__propagateToListeners_handleError.call$0 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25860:49)
      at Object._Future__propagateToListeners (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:4539:77)
      at _Future._completeError$2 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25693:9)
      at _AsyncAwaitCompleter.completeError$2 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25036:12)
      at Object._asyncRethrow (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:4288:17)
      at /Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:13174:20
      at _wrapJsFunctionForAsync_closure.$protected (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:4313:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25057:12)
      at _awaitOnObject_closure0.call$2 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25049:25)
      at _RootZone.runBinary$3$3 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:27035:18)
      at _FutureListener.handleError$1 (/Users/atom/Desktop/hello/AppTradePlatformWeb/node_modules/sass/sass.dart.js:25563:19)

[atzcl]

~Encountered the same problem, is there a solution?~

===>

use ::v-deep instead of /deep/

[caoxiemeihao]

~Encountered the same problem, is there a solution?~

===>

use ::v-deep instead of /deep/

Thanks! 🎉🎉🎉

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors