/deep/ .ant-tree { position: relative; /deep/ &::before { content: ''; width: 1px; height: 100%; height: calc(100% - 35px); position: absolute; border-left: 1px solid #d9d9d9; left: -6px; top: 18px; } /deep/ .ant-tree-treenode-switcher-open, /deep/ .ant-tree-treenode-switcher-close { position: relative; } >li:first-child:nth-last-child(1)::after { border: 0; } } /deep/ .ant-tree-treenode-switcher-close::after, /deep/ .ant-tree-treenode-switcher-open::after { content: ''; width: 8px; height: 1px; position: absolute; border-top: 1px solid #d9d9d9; left: -6px; top: 18px; } /deep/ .ant-tree > li:last-child::after { content: ''; width: 8px; height: 100%; border-top: 1px solid #d9d9d9; background-color: #fff; position: absolute; left: -6px; top: 18px; } /deep/ .ant-tree-treenode-switcher-close::before{ border: 0 !important; } /deep/.ant-tree-child-tree.ant-tree-child-tree-open > li:first-child { padding-top: 4px; } .last-menu-line() { position: absolute; left: 12px; width: 1px; height: 100%; margin: 22px 0 0; border-left: 1px solid #d9d9d9; content: ' '; } ul.ant-tree.icon-tree /deep/li { & > .ant-tree-checkbox { margin-left: 24px; & + .ant-tree-node-content-wrapper > .ant-tree-title { > i:nth-child(1) { position: absolute; left: -42px; top: 5px; } } } } ul.ant-tree /deep/li { position: relative; &:nth-last-child(1) { /deep/&.ant-tree-treenode-switcher-open::before { .last-menu-line; height: calc(100% - 46px); } } &:before { position: absolute; left: 12px; width: 1px; height: 100%; height: calc(100% - 42px); margin: 22px 0 0; border-left: 1px solid #d9d9d9; content: ' '; } .ant-tree-node-content-wrapper { padding: 0; position: relative; } ul.ant-tree-child-tree.ant-tree-child-tree-open > li { &::after { content: ''; position: absolute; width: 8px; height: 1px; border-top: 1px solid #d9d9d9; background: transparent; top: 15.5px; left: -5px; margin: 0; } &:nth-last-child(1) { &.ant-tree-treenode-switcher-open::before { .last-menu-line; height: calc(100% - 37px); } } } span.ant-tree-switcher { background: rgba(0, 0, 0, 0); } } div ul.ant-tree /deep/li.ant-tree-treenode-switcher-open { > ul.ant-tree-child-tree-open > li:nth-last-child(1) > ul::before { content: ''; width: 1px; height: 100%; position: absolute; background: #fff; left: -6px; top: 16px; } > ul.ant-tree-child-tree-open > li:nth-last-child(1) > span { &.ant-tree-node-content-wrapper::before { content: ''; width: 1px; position: absolute; background: #fff; left: -30px; top: 13px; height: calc(100% + 10px); } &.ant-tree-checkbox + .ant-tree-node-content-wrapper::before { top: 13px; left: -52px; } } > .ant-tree-node-content-wrapper-normal::before { content: ''; width: 1px; height: 100%; position: absolute; background: #fff; left: -12px; top: 16px; } }vue3写法

<think>我们正在处理一个将Less样式（使用了/deep/）转换为Vue3兼容写法的问题。根据引用[2]和引用[4]，Vue3中不再推荐使用/deep/，而是推荐使用::v-deep或:deep()。原代码是Less，并且使用了/deep/。在Vue3中，我们可以使用:deep()选择器（这是Vue3官方推荐的）来替代。转换步骤：1.将所有的`/deep/`替换为`:deep()`，并将需要穿透的选择器放在括号内。2.注意原代码中有些选择器是嵌套的，我们需要确保每个需要穿透的选择器都使用:deep()包裹。原代码结构：```@set-color:#7c7c7c;/deep/.ant-tree-child-tree.ant-tree-child-tree-open>li:first-child{padding-top:4px;}...（其他样式）```转换后的写法：对于第一个规则，我们将其改为：```:deep(.ant-tree-child-tree.ant-tree-child-tree-open>li:first-child){padding-top:4px;}```对于嵌套在`.ant-tree`下的`li`，原代码是：```.ant-tree/deep/li{...}```我们将其改为：```.ant-tree:deep(li){...}```同样，对于内部的`.ant-tree-node-content-wrapper`等，也需要使用`:deep()`。另外，原代码中定义了一个Less混合（mixin）`.last-menu-line()`，这个不需要改动，因为它没有使用穿透，并且只在当前样式内部使用（虽然这里没有使用，但保留即可）。注意：在Vue3的单文件组件中，如果使用`<stylescoped>`，我们通常这样写：```vue<stylescopedlang="less">...转换后的样式...</style>```因此，转换后的完整样式如下：</think>在 Vue 3 中，`/deep/` 选择器已被弃用，需要改用 `::v-deep` 或 `:deep()` 语法来处理 Sass/Less 样式穿透。以下是完整的转换方法和最佳实践： ### 转换后的 Vue 3 兼容写法 ```less @set-color: #7c7c7c; :deep(.ant-tree-child-tree.ant-tree-child-tree-open > li:first-child) { padding-top: 4px; } .last-menu-line() { position: absolute; left: 12px; width: 1px; height: 100%; margin: 22px 0 0; border-left: 1px dotted @set-color; content: ' '; } .ant-tree :deep(li) { position: relative; &:before { position: absolute; left: 12px; width: 1px; height: calc(100% - 45px); margin: 22px 0 0; border-left: 1px dotted @set-color; content: ' '; } :deep(.ant-tree-node-content-wrapper) { padding: 0; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } :deep(.ant-tree-child-tree.ant-tree-child-tree-open > li) { &::after { content: ''; position: absolute; width: 8px; height: 1px; border-top: 1px dotted @set-color; background: transparent; top: 15.5px; left: -5px; margin: 0; } :deep(.ant-tree-switcher-noop) { height: 1px; border-top: 1px dotted @set-color; top: 11.5px; left: 4px; margin: 0; width: 18px; margin-right: 6px; } } } ``` ### 关键转换点 1. **深度选择器替换**： - `/deep/` → `:deep()`（Vue 3 官方推荐语法） - 示例：`.ant-tree /deep/ li` → `.ant-tree :deep(li)` 2. **嵌套结构处理**： ```less // 原写法 .parent /deep/ .child { ... } // Vue 3 写法 .parent :deep(.child) { ... } ``` 3. **伪元素穿透**： ```less // 原写法 li /deep/ &::after { ... } // Vue 3 写法 li :deep(&::after) { ... } ``` ### Vue 3 中样式穿透的三种写法对比 | 语法 | 适用场景 | Vue 3 支持 | 预处理器兼容性 | |-------------|-------------------------|------------|----------------| | `>>>` | 原生 CSS | ❌ 已弃用 | ❌ Less/Sass | | `/deep/` | Less/Sass | ❌ 已弃用 | ✅ | | `::v-deep` | 通用语法 | ⚠️ 兼容模式 | ✅ | | `:deep()` | **Vue 3 官方推荐** | ✅ | ✅ | ### 最佳实践 1. **作用域声明**： ```vue <style scoped lang="less"> /* 使用 :deep() 处理子组件样式 */ </style> ``` 2. **全局变量注入**（`vite.config.js`）： ```js export default defineConfig({ css: { preprocessorOptions: { less: { additionalData: `@import "@/styles/variables.less";` } } } }) ``` 3. **避免过度穿透**： ```less /* 不推荐 */ :deep(*) { ... } /* 推荐：精准定位 */ :deep(.ant-tree-node) { ... } ``` 4. **组合使用 CSS 变量**： ```less :deep(.ant-tree) { --tree-line-color: #7c7c7c; li:before { border-left: 1px dotted var(--tree-line-color); } } ``` ### 相关问题 1. **如何在 Vue 3 项目中配置全局 Less 变量？** 可通过 `vite.config.js` 的 `preprocessorOptions.less.additionalData` 注入全局变量[^3]。 2. **::v-deep 和 :deep() 有何区别？** `::v-deep` 是 Vue 2 过渡语法，`:deep()` 是 Vue 3 官方推荐的标准写法，具有更好的作用域隔离[^2]。 3. **样式穿透是否影响 Vue 3 的性能？** 适度使用不影响性能，但应避免全局穿透（如 `:deep(*)`），建议精确选择目标元素[^4]。 4. **如何处理第三方组件库的样式覆盖？** 优先使用组件提供的 CSS 变量或配置项，深度选择器作为最后手段[^1]。 [^1]: 深度选择器用于解决 Sass/Less 的样式穿透问题[^1] [^2]: Vue 3 推荐使用 `:deep()` 替代 `/deep/` 和 `>>>`[^2] [^3]: 通过构建工具可注入全局 Less 变量[^3] [^4]: 深度选择器能影响子组件样式，但需谨慎使用[^4]