vue-element-admin
vue-element-admin copied to clipboard
PanJiaChen
用最新的框架，打包出来element的字体图标乱码了？
想问下大佬们是不是使用了babel-plugin-component或babel-plugin-component-scss进行按需引入才出现这个问题，我的也是有的项目打包乱码有的正常，区别就是乱码的用了按需引入和自定义主题
想问下大佬们是不是使用了babel-plugin-component或babel-plugin-component-scss进行按需再次才出现这个问题，我的也是的项目打包乱码有的正常，区别就是乱码的用了按需约会和自定义主题
是的，引入了按需加载，关于你的建议，我去验证下。
想问下大佬们是不是使用了babel-plugin-component或babel-plugin-component-scss进行按需引入才出现这个问题，我的也是有的项目打包乱码有的正常，区别就是乱码的用了按需引入和自定义主题
没有按需加载，测试之后，依然有问题。
应该是@import引入elementui css问题，我把element-variables.scss 中的@import elementui删除了，改成main.js中引入可以解决
用dart-sass，然后写个{ content: '\e055'; }的样式看看会不会乱码，我这直接使用element-ui是没有问题的，但是如果是用自定义主题+按需引入（会使用element-ui/packages/theme-chalk/src下面的scss）就会乱码了，找到一个issues 估计和编码相关#https://github.com/sass/sass/issues/1395
Dart-sass 缂栬瘧杈撳嚭鐨勬枃浠舵槸 UTF-8 缂栫爜鐨?Unicode 鏄庢枃锛屽鏋?Web 鏈嶅姟鍣ㄩ厤缃簡 charset=gbk 鐨勫搷搴斿ご锛堟垨娌℃湁閰嶇疆 charset 鍝嶅簲澶达級锛屽垯娴忚鍣ㄦ棤娉曟纭瘑鍒?content 灞炴€ч噷鐨勫瓧绗︼紝瀵艰嚧鍥炬爣鍑轰笉鏉ャ€?/p>
鎵€浠ラ鍏堥渶瑕佹鏌?Web 鏈嶅姟鍣ㄧ殑閰嶇疆銆?/p>
相同问题关注中，刚试了下直接下载最新框架然后编译，也是存在编译后图标的content乱码问题。
自己项目有试过卸载dart-sass然后安装node-sass，这样编译后不会乱码， 但是dart-sass才是未来方向，而且换node-sass后本地图片加载出现问题，担心还有其他问题，所以还是排除该解决方法。
不知道是否有合理解决方案，蹲一下。
@sunflowering 刚刚我编译也显示找不到，然后重新跑了几次通过了。。非常神奇，你重新安装nodemodules看看，我这边先推到测试服我去看看我的项目正常不正常。。。 话说这个乱码我是几率性出现，，我很难复现
@sunflowering 刚刚我编译也显示找不到，然后重新跑了几次通过了。。非常神奇，你重新安装nodemodules看看，我这边先推到测试服我去看看我的项目正常不正常。。。 话说这个乱码我是几率性出现，，我很难复现
谢谢，我再看看。乱码这个问题我这边开发环境下没有见到过，不过测试说通过ip访问我这边页面时有一定概率出现。
刚在想是否是因为编译时content的内容变成方框所以会图标乱码，因为本地页面图标显示正常时在检查模式下content也是一个方框。
@sunflowering 刚刚我编译也显示找不到，然后重新跑了几次通过了。。非常神奇，你重新安装nodemodules看看，我这边先推到测试服我去看看我的项目正常不正常。。。 话说这个乱码我是几率性出现，，我很难复现
谢谢，我再看看。乱码这个问题我这边开发环境下没有见到过，不过测试说通过ip访问我这边页面时有一定概率出现。
刚在想是否是因为编译时content的内容变成方框所以会图标乱码，因为本地页面图标显示正常时在检查模式下content也是一个方框。
看看我上面说的方式吧，主要是import引入时加载的字体的速度不稳定，导致有会乱码，有时不会，改为提前加载就不会了。
@sunflowering 刚刚我编译也显示找不到，然后重新跑了几次通过了。。非常神奇，你重新安装nodemodules看看，我这边先推到测试服我去看看我的项目正常不正常。。。 话说这个乱码我是几率性出现，，我很难复现
谢谢，我再看看。乱码这个问题我这边开发环境下没有见到过，不过测试说通过ip访问我这边页面时有一定概率出现。 刚在想是否是因为编译时content的内容变成方框所以会图标乱码，因为本地页面图标显示正常时在检查模式下content也是一个方框。
看看我上面说的方式吧，主要是import引入时加载的字体的速度不稳定，导致有会乱码，有时不会，改为提前加载就不会了。
按上面说的方式试了，不知道为什么我这边总是编译出错
@sunflowering 你这个语句跟他引入的都不一样啊 他是引入的nodemodules的路径 import 'element-ui/lib/theme-chalk/index.css'
@sunflowering 你这个语句跟他引入的都不一样啊 他是引入的nodemodules的路径 import 'element-ui/lib/theme-chalk/index.vss'
啊！我的锅，谢谢指出。 @web-MrTang 不好意思，是我路径的问题。
@web-MrTang
再请教您一下，因为我的项目中有引入阿里图标库，内网项目所以将字体文件作为静态文件放assets文件夹了。 iconfont.scss是在index.scss中import的，这些图标有时也会乱码，测试反馈是再刷新下页面就又好了。 这个问题也是类似原因导致的吗？“import引入时加载的字体的速度不稳定，导致有会乱码，有时不会，改为提前加载就不会了” 也是改为在main中import iconfont.scss就可以解决了么？
最近我负责的项目也出现了这个问题，不过我这边除了伪元素图标外，还有伪元素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标签上设置：<meta charset="utf-8" >，但这只对HTML内容解析有效，对于css内容中(外部样式表下)的双字节字符（如中文）解析并没有作用的，所以如果浏览器请求回来的css资源的HTTP响应头里的Content-Type未指明"charset=utf-8"的话，浏览器根据自身的嗅探机制来决定采用哪一种编码解析，结果就会概率出现双字节字符乱码的情况
解决方案：
1、和后端商量下，让css资源请求的响应头的Content-Type增加"charset=utf-8"声明
2、使用 @charset，不过这种方法我试了好久vue-cli编译后的css都没能把@charset ”UTF-8“输出，直接使用sass命令行编译是有的
3、使用 css-unicode-loader，这个是我最近写的一个webpack loader,用来将双字节字符的伪元素内容转换成unicode编码，目前我使用的是这种方案
新消息又炸出来了，之前那个提前加载的方案，项目中有引入阿里图标库的代码也放main.js引入了，但测试反馈还是有一定几率出现乱码，似乎概率小了些。
项目着急上线，为了稳妥，我就把菜单图标（自己引入的iconfont）换成了svg。
@styzhang 目前没机会验证，不过谢谢@告知你的问题分析和解决方案。
https://github.com/ElemeFE/element/issues/19247 element的issues发现了一个解决方案
2、使用 @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。
如果是通过 @vue/cli 搭建的环境，因为有 cssnano 处理压缩，所以可以给 vue.config.js 传入 sassOptions 避免 compressed。
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" }
}
}
}
}
2、使用 @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。如果是通过 @vue/cli 搭建的环境，因为有 cssnano 处理压缩，所以可以给 vue.config.js 传入 sassOptions 避免 compressed。
module.exports = { css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } } }
我试了，不行呀，你确定你的可以吗
I don't understand Chinese, but, I have the same problem. I having many projects with custom font-icon and bootstrap glyphic on and fontawesome and after update to the Dart-sass 1.32.7 I can't work with all of my projects which build on sass!!! You can ask why? Because of this:
content:"\e935"; in .scss converting to content:"" in .css
I trying:
--no-unicode
and
--no-charset
and
wrote @charset "ASCII"; (and @charset "UTF-8") at top of base file with above and without above, together and separated;
what I need to do to force compiling code correct???
MacBook OS: Big Sure sass: Dart-sass 1.32.7 installed with brew (brew install sass/sass/sass)
Before "global" update I used Ruby Sass and all works fine.
p.s. please give to me some quick solution because it is very important for working with many web projects what I support.
@nykoleks You can try to use css-unicode-loader,it can restore icon content to unicode, I used this method to solve
@styzhang Thanks but if you create custom font-icon, your symbols will not unicode... and I use not sass-node, I use preinstalled terminal version. I think that current task at this issues tree will not executable because sass was deprecated and closed... I found task at dart-sass what was recommended by sass developers... https://github.com/sass/dart-sass/issues/1219#issuecomment-780026829 Here is fresh issue with old problem and, I hope, it be resolved.
@zeratul1
2、使用 @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。如果是通过 @vue/cli 搭建的环境，因为有 cssnano 处理压缩，所以可以给 vue.config.js 传入 sassOptions 避免 compressed。
module.exports = { css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } } }
3Q，回头我试下
应该是@import引入elementui css问题，我把element-variables.scss 中的@import elementui删除了，改成main.js中引入可以解决
如果使用默认的样式，不改变配色啥的可能可以，但是使用其他的配色主题就不好用了，会还原到默认的配色，不好用
升级dart-sass to sass最新版本可以解决此问题； charset 默认为true https://github.com/sass/dart-sass/releases/tag/1.39.0
2、使用 @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。如果是通过 @vue/cli 搭建的环境，因为有 cssnano 处理压缩，所以可以给 vue.config.js 传入 sassOptions 避免 compressed。
module.exports = { css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } } }
亲测有效，解决了一个头疼好久的问题，感谢
2、使用 @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。如果是通过 @vue/cli 搭建的环境，因为有 cssnano 处理压缩，所以可以给 vue.config.js 传入 sassOptions 避免 compressed。
module.exports = { css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } } }
这样样式文件压缩都不压缩了吧
我写了个简单的webpack插件，在生成css文件的时候会在最前面加上 @charset uft-8，这样就不会乱码了 https://github.com/AndSpark/css-utf-8-plugin
