搜索网站哪个好,上海网站建设找思创,智能识别图片,河南建设监理协会新网站线上环境偶尔会复现#xff0c; 具体#xff1a;
一般使用不会出现这个问题#xff0c;因为一般引入的是element-ui的css文件#xff0c;问题出在于为了主题色变化啊#xff0c;需要用到scss变量引入了scss文件。
import “~element-ui/packages/theme-chalk/src/index”…
线上环境偶尔会复现 具体
一般使用不会出现这个问题因为一般引入的是element-ui的css文件问题出在于为了主题色变化啊需要用到scss变量引入了scss文件。
import “~element-ui/packages/theme-chalk/src/index”; 而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文所以通过伪元素来展示的图标如el-icon-arrow:before{ content: “\e6df”}编译之后就变成了el-icon-arrow:before{ content: “”}“”便是一个双字节字符导致出现乱码。
解决办法
网上搜了下很多人遇到这个问题偶现发生一般刷新下页面又好了解决方式主要有3个
由 dart-sass 改回 node-sass自己额外引入 element-ui 的图标 css 文件sass 版本更新到 1.39.0并且修改 vue.config.js 配置文件的 css.loaderOptions.sass.sassOptions.outputStyle 为 expanded
权衡之下选择了最优雅的最后一种不过并没有去更改 sass 和 sass-loader 的版本只修改了 outputStyle 配置这个不设置默认会是 compressed 修改后的 vue.config.js 配置文件
module.exports {transpileDependencies: [element-ui],css: {loaderOptions: {scss: {additionalData: import /styles/var.scss;, // 不同版本的 sass此属性不同data、prependData、additionalDatasassOptions: { outputStyle: expanded } // fix: 解决 element-ui 图标 icon 偶现乱码问题}}},devServer: {proxy: {/api: {target: http://dev.xxx.com,changeOrigin: true},}}
}
注意很多人分享的都是去设置 sass.sassOptions.outputStyle如果你的项目中页面都是用的 scss那这个地方是要去设置 scss.sassOptions.outputStyle 才有效的。
sass 和 scss 其实是同一种东西我们平时都称之为 sassscss 是 sass 3 引入新的语法说白了 scss 就是 sass 的升级版。
dart-sass 只支持两种输出格式outputStyle
expanded输出跟我们平时开发中手写的css样式很像选择器、属性等各占一行属性根据选择器缩进而选择器不做任何缩进compressed输出方式删除所有无意义的空格、空白行、以及注释将文件体积压缩到最小同时也会做出其他调整比如会自动替换占用空间最小的颜色表达方式
修改后重新编译部署发现源码和浏览器中加载的样式都没问题了
