Recently, I used the Elder-UI library for the project I was in charge of, and DART-Sass recommended by the official website was used for compiling SASS. However, there were occasional garbled codes after the project was launched

After checking, the content in icon has changed to a strange character



why

If you use element UI CSS file, it will not cause this problem. If you use element UI CSS file, it will cause this problem

@import "~element-ui/packages/theme-chalk/src/index";
Copy the code

When dart-Sass compiles the Content of the icon pseudo-element in elder-UI, the Unicode encoding will be converted to the corresponding Unicode plaintext, so ICONS displayed by the pseudo-element will be like el-icon-arrow:before{content: “\e6df”}, which when compiled becomes el-icon-arrow:before{content: “”}, “” is a double-byte character, resulting in garbled characters

The solution

1. The element UI is compiled at the time of Node-sass, so dart-sass can be replaced with Node-sass, but Dart-sass is mainly promoted on the official website. Dart-sass will be the mainstream in the future

2. Check online information and find that we can discuss with the backend to add “charset= UTF-8 “statement to the content-Type of the CSS resource request response header. Because it involves the backend, the author has not tested the specific, so I don’t know whether it is feasible.

3, this method is online check github.com/styzhang/cs… Add a loader to the SCSS file to convert the double-byte characters in the CSS file compiled by Dart-SCSS back to hexadecimal code

const CONTENT_MATCH_REG = / (? 
      ; // Find the content in the pseudo-element
const UNICODE_MATCH_REG = /[^\x00-\xff]/g; // Find a non-single-byte character
function fun(source) {
  source = source.replace(CONTENT_MATCH_REG, function (m, p1) {
    return m.replace(UNICODE_MATCH_REG, function (m) {
      return "\ \" + m.charCodeAt(0).toString(16); // m.charcodeat (0) returns the Unicode encoding for the first character of the string, followed by hexadecimal, preceded by a slash
    });
  });
  return source;
}
let test = `. El - icon - ice - cream - square: before {content: ""; } `;
console.log(fun(test));
// Print the result
// .el-icon-ice-cream-square:before {
// content: "\e6da";
/ /}

Copy the code

Can be written by installing the loader

npm install --save-dev css-unicode-loader
Copy the code

If vuecli3+ is used, you can perform the following operations

// 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")})})})}}Copy the code