CRA项目中Kendo UI React图标CSS content十六进制值编译丢失反斜杠

• 问题根源：Create React App的Webpack配置在处理CSS时，会将单个反斜杠识别为转义字符，导致\e030被编译后丢失开头的反斜杠，变成e030，无法正确识别为Unicode图标序列。

• 两种可行修复方案：

  1. 使用双重反斜杠：在CSS中把转义序列写成\\e030，让Webpack编译后保留单个反斜杠：

     th.k-header[role=columnheader]:nth-child(1) .k-i-more-vertical:before {
        color: #ff0 !important;
        content: "\\e030" !important;
     } 
     

  2. 使用CSS unicode() 函数：这是更标准的CSS写法，兼容性良好：

     th.k-header[role=columnheader]:nth-child(1) .k-i-more-vertical:before {
        color: #ff0 !important;
        content: unicode("\e030") !important;
     } 
     

• 验证方式：修改后重新编译项目，查看Chrome DevTools中该元素的content属性，若显示为"\e030"，则图标可正常渲染。

内容的提问来源于stack exchange，提问作者abischolz