vue-element项目打包后偶尔出现icon乱码，Using / for division is deprecated and will be removed in Dart Sass 2.0.0

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/126706153

一、vue-element项目打包后偶尔出现icon乱码

解决方法

1、npm install css-unicode-loader

2、配置vue.config.js文件


module.exports = {

  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded'
        }
      }
    }
  },
 
  configureWebpack: (config) => {
    // 解决打包后icon乱码  核心部分
    config.module.rules.filter(rule => {
      return rule.test.toString().indexOf("scss") !== -1;
    })
      .forEach(rule => {
        rule.oneOf.forEach(oneOfRule => {
          oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,
            { loader: require.resolve("css-unicode-loader") })
        })
      })
    //配置网页标签页名称
    config.name = '碳排放管理平台'
    // 函数式写法
    const resolve = {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
    const plugins = []
    //这里要返回一个对象
    return { resolve, plugins };
  },
}

验证方法是否生效

项目打包后找到index.html文件打开，F12查看图标样式是否正常。

乱码的图标样式如下所示

正常图标样式应该如下所示

其他补充

webpack配置可查文档

css:配置参考 | Vue CLI

configureWebpack:配置参考 | Vue CLI

webpack 相关 | Vue CLI

Sass教程 Sass中文文档 | Sass中文网

node-sass代替sass无效

还有一种node-sass 代替sass方法，测试后无效，记录一下安装node-sass后的报错

npm uninstall sass

npm install node-sass@4.14.1

运行后出现以下错误

解决方法： rgb(250 250 250)改成rgb(250,250,250)

解决方法：找打对应的文件，将math.div(a,b)改成 a/b 的写法
// $--group-option-flex: 0 0 math.div(1, 5) * 100% !default;
$--group-option-flex: 0 0 1/5 * 100% !default;