Vue3 uses element plus package to solve the problem of occasionally disordered code on the icon after it goes online

Unlike element UI, element plus does not use node sass or dart sass, but sass and sass loader. At first, I thought it might be that the sass version and sass loader version of the project are inconsistent with the version of element plus, so I deleted the version of my project and installed the version consistent with the version used by element plus, but the problem is not solved. The version is as follows:

 "devDependencies": {
    "postcss-loader": "^5.3.0",
    "sass": "^1.35.1",
    "sass-loader": "^10.0.1",

After tossing around for a while, I found an article on the Internet (the solution of icon garbled code packaged by dart sass compiled element UI). This is a solution for element UI, but I don’t know whether it is effective for element plus. Therefore, after using this method for element plus according to the instructions, I found that it is also effective, so I made a record, The steps are as follows:
1. Install the plug-in CSS Unicode loader;

yarn add css-unicode-loader -D //npm install css-unicode-loader -D

2. In vue.config.js configuration, I used the object writing method, and here it is modified to function writing method

// vue.config.js
module.exports = {
  configureWebpack: config => {
    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")})

Read More: