解决 element-ui 打包后 icon 图标乱码问题

问题描述：

vue2+element-ui 的项目，本地看没有问题，打包部署后 element-ui 自带的 icon 图标显示乱码

问题原因：

查看打包后生成的 dist/css/app.xxx.css 文件，发现乱码的图标部分变成了

.el-icon-ice-cream-square:before{content:“”}

问题解决：

1. sass 版本升级到 1.39.0npm install [email protected] ，也可直接修改 package.json 中 sass 的版本号然后重新npm install
2. vue.config.js 增加 sass 配置

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: '',
        ws: true, // proxy websockets
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
    disableHostCheck: true,
},
css: {
    loaderOptions: {
      sass: {    // 这里开始是新增的配置
        sassOptions: {
          outputStyle: 'expanded'
        }
      }
    }
  },

然后重新打包就可以了