styzhang

最近我负责的项目也出现了这个问题，不过我这边除了伪元素图标外，还有伪元素content为中文时会概率出现乱码，查了下资料先说下出现乱码的原因： 1、对于图标编译之后，图标的content呈现乱码有dart-sass编译的原因，我自己本地分别用vue-cli build 和直接使用sass命令编译试了下，发现结果都是一样的：dart-sass编译时会将对应的unicode编码转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: "\e6df"}，编译之后就变成了el-icon-arrow:before{ content: ""}，“”便是一个双字节字符 2、正常情况我们会在meta标签上设置：``，但这只对HTML内容解析有效，对于css内容中(外部样式表下)的双字节字符（如中文）解析并没有作用的，所以如果浏览器请求回来的css资源的HTTP响应头里的Content-Type未指明"charset=utf-8"的话，浏览器根据自身的嗅探机制来决定采用哪一种编码解析，结果就会概率出现双字节字符乱码的情况 解决方案： 1、和后端商量下，让css资源请求的响应头的Content-Type增加"charset=utf-8"声明 2、使用 [@charset](https://developer.mozilla.org/zh-cn/docs/web/css/@charset)，不过这种方法我试了好久vue-cli编译后的css都没能把@charset ”UTF-8“输出，直接使用sass命令行编译是有的 3、使用 [css-unicode-loader](https://github.com/styzhang/css-unicode-loader)，这个是我最近写的一个webpack loader,用来将双字节字符的伪元素内容转换成unicode编码，目前我使用的是这种方案

@nykoleks You can try to use [css-unicode-loader](https://github.com/styzhang/css-unicode-loader),it can restore icon content to unicode, I used this method to solve

@zeratul1 > > 2、使用 [@charset](https://developer.mozilla.org/zh-cn/docs/web/css/@charset)，不过这种方法我试了好久vue-cli编译后的css都没能把@charset ”UTF-8“输出，直接使用sass命令行编译是有的 > > https://github.com/webpack-contrib/sass-loader/blob/0db6fb61416052ad750383efb829e2c42a75a238/src/utils.js#L150-L153 > > https://github.com/sass/dart-sass/blob/ec0bab5538e6c6913c1f074f08d59ba6eb9bc3f6/lib/src/visitor/serialize.dart#L44-L79 > > 因为 sass-loader 会检查运行环境的模式，给 dart-sass 传入 `{ outputStyle: "compressed" }`。 > dart-sass 在这时会使用 BOM 而不是输出 `@charset`。 >...

@18856743789 可参考这个回答解决： https://github.com/styzhang/css-unicode-loader/issues/3#issuecomment-1104988047 看你上面的配置，圈红这部分有些多余：  使用vue-cli创建项目默认就会有css预处理器sass相关的loader rule配置（参考：[vue-cli预处理器](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)），`css-unicode-loader`插入位置是根据vue-cli内置的`.scss (或.sass)` loader rule配置把`css-unicode-loader`插到`sass-loader`前面，配置好了可通过[vue inspect](https://cli.vuejs.org/zh/guide/webpack.html#%E5%AE%A1%E6%9F%A5%E9%A1%B9%E7%9B%AE%E7%9A%84-webpack-%E9%85%8D%E7%BD%AE)命令输出webpack配置，看`css-unicode-loader`是否在`sass-loader`前面即可

@jetBn 你是用的什么脚手架，原生的webpack吗

@jetBn 你这个也没个贴图啥的，不知道你们项目上webpack的配置是啥；vue-cli也是基于webpack的，出发点让开发者能快速上手项目，省略webpack繁琐的配置，例如创建项目时根据开发者选择是否使用CSS预处理器，使用那种CSS预处理器（Sass、Less等）），然后合理的加入相关loader的配置。你项目如果走的原生的webpack配置文件来配置，可参考官网[loader配置](https://www.webpackjs.com/concepts/loaders/#configuration)的教程，下面给你个参考： ``` module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" // 将 JS 字符串生成为 style 节点 }, { loader: "css-loader" // 将 CSS...

> @styzhang ok 但是我发现好像还是不行  @jetBn 可以发下你这块完整的loader配置吗