ant异常整理-错误: 非法字符: \65279 .

本文介绍了在使用Ant进行项目打包时遇到的非法字符65279错误及其解决方案。提供了修改文件编码及直接重建文件内容两种方法,并解释了这些错误通常与文件编码不一致有关。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一. 在用ant把项目打包,遇到一个问题:编译java文件的时候,有些java文件报非法字符 \65279错误

在eclipse中根据错误提示,找到有【错误: 非法字符: \65279】的java文件,先将文件编码改为:ISO-8859-1, 然后打开这个java文件,在最开始的位置找到几个乱码字符【】,删除乱码字符,然后再把该文件的编码重新改回utf-8,最后重新编译就OK啦 。
这个是网上的解决方法,试了一下很多情况下无法使用。
 
二.另外一种方式是把报错的这个java文件删除掉,再重新手动输入一遍内容,重新编辑就可以了。
 
三. ant异常整理-错误: 非法字符: \65279 . 是ant build的时候无法识别格式。
/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写法
最新发布
06-27
<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]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值