一、背景

本項目是若依作為開發(fā)框架（elemen-ui + vue + sass），開發(fā)過程中，圖標(biāo)一直正常。

直到打包發(fā)布到線上，頁面偶發(fā)性出現(xiàn)圖標(biāo)亂碼問題，再次刷新頁面后，又可正常顯示。

二、現(xiàn)象

1、項目打包后，dist/css/app.xxx.css，發(fā)現(xiàn)所有的圖標(biāo)樣式content的文本未正常顯示了。例：el-icon-moon:before{content:“”}；

2、雖然頁面圖標(biāo)可以正常顯示，但是用F12，會發(fā)現(xiàn)字體依然是亂碼；

三、原因

本項目使用的依賴包是sass（dart-sass），elementui使用的是node-sass，而dart-sass在編譯element-ui里icon偽元素的content unicode編碼時會轉(zhuǎn)換成對應(yīng)unicode明文，所以通過偽元素來展示的圖標(biāo)如el-icon-arrow:before{ content: “\e6df”}，編譯之后就變成了el-icon-arrow:before{ content: “”}，“”便是一個雙字節(jié)字符，導(dǎo)致出現(xiàn)亂碼。

/* 編譯前 */
.el-icon-edit{content:'\e878'}

/* 編譯后 */
.el-icon-edit{content:"?"}/*# sourceMappingURL=index.css.map */

四、處理方法

方式1：使用css-unicode-loader

1、安裝css-unicode-loader

npm i -D css-unicode-loader 

需要在config.js里面配置如下代碼

configureWebpack: (config) => {
    ...otherCode,
  const sassLoader = require.resolve("sass-loader");
    config.module.rules
      .filter((rule) => {
        return rule.test.toString().indexOf("scss") !== -1;
      })
      .forEach((rule) => {
        rule.oneOf.forEach((oneOfRule) => {
          const sassLoaderIndex = oneOfRule.use.findIndex(
            (item) => item.loader === sassLoader
          );
          oneOfRule.use.splice(sassLoaderIndex, 0, {
            loader: require.resolve("css-unicode-loader"),
          });
        });
      });
}

方式2：升高 sass版本到1.39.0

修改package.json文件中sass的版本，由1.26.2直接改為1.39.0，然后執(zhí)行npm install安裝依賴

方式3：替換element-ui的樣式文件

element-variables.scss 中的@import elementui刪除了，改成main.js中引入

方式4：更換打包壓縮方式

因為 sass-loader 會檢查運行環(huán)境的模式，給 dart-sass 傳入 { outputStyle: “compressed” }。 dart-sass 在這時會使用 BOM 而不是輸出 @charset。

如果是通過 @vue/cli 搭建的環(huán)境，因為有 cssnano 處理壓縮，所以可以給 vue.config.js 傳入 sassOptions 避免 compressed。

sass的默認(rèn)輸出格式為expanded,編譯時不會轉(zhuǎn)換unicode字符。而sassLoader修改了sass默認(rèn)輸出格式為compressed。

因此我們在配置sassLoader時將輸出格式重新改為expanded便能解決問題

module.exports = {
	css: {
		loaderOptions: {
			sass: {
				implementation: require('sass'),
				sassOptions: {
					// 生效代碼
					outputStyle: 'expanded'
				}	
			}
		}
	}
}

知識擴展：

sass最終輸出的樣式包括下面幾種樣式風(fēng)格：

• 嵌套輸出方式 nested
• 展開輸出方式 expanded
• 緊湊輸出方式 compact
• 壓縮輸出方式 compressed

方式5：把sass更改為node-sass編譯（不推薦）

element-ui采用的時node-sass編譯，可以把dart-sass換成node-sass。

但是：

• node-sass 已經(jīng)被標(biāo)記為過時了，這意味著它也會慢慢退出歷史舞臺，
• dart-sass 是被官方推薦的 sass 編譯器，dart-sass是未來的主流。

// 卸載sass
npm uninstall sass
// 安裝node-sass
npm install --dev node-sass

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論