During a recent development launch, several colleagues (product and test) reported that ICONS in the online front-end system “occasionally” had garbled characters. At first my first thought was, did the font file sometimes not load? Could there be a configuration problem with Nginx preventing font files from loading?

If Nginx configuration problem is not able to load the font file each time, so exclude. Do font files sometimes not load? But through the screening of garbled fonts when the file is also loaded, then what is the problem?

View the packaged app.css file

Why is iconfont’s content garbled?

Check out the official website is!

Why does packing regret become garbled? Check the data and find the possible cause of Dart-sass and Node-sass

The dart – sass and node – sass

What’s the difference between these two?

The same

- both are tools for compiling Sass into CSS.Copy the code

The difference between

-node-sass compiles sass with node(calling CPP libsass);

Dart-sass uses the DRAT VM to compile SASS.

- Node-sass is automatically compiled in real time. Dart-sass takes effect only after being saved. It is recommended that Dart-sass has better performance (and is officially used by SASS), and Node-sass is often not installed due to national conditionsCopy the code

Node-sass based on libsass will be deprecated and dart-sass will be recommended instead.

Dart.js is used to compile Sass with dart-sass in node_modules.

Vue-cli will give you the choice of dart-sass or Node-sass (currently dart-sass is recommended) when creating a project.

So why does compiling iconfont in Element-UI differently produce garbled characters? That’s because element-UI is compiled with Node-sass, so dart-sass is a mess to build.

How to solve the problem

1.npm uninstall sass

2.npm install node-sass -D

After building the project, the CSS file icon is displayed properly