[ElemeFE/element][Bug Report] 使用dart-sass打包element icon出现乱码

Element UI version

2.15.7

OS/Browsers version

macos big sur 11.2 / chrome版本 99.0.4844.83（正式版本） (x86_64)

Vue version

2.6.10

https://codepen.io/ziyoung/pen/LKNBqB

直接yarn build

图标正确显示

el-icon-potato-strips:before{content:""}.el-icon-milk-tea:before{content:""}.el-icon-ice-drink:before{content:""}.el-icon-ice-tea:before{content:""}.el-icon-coffee:before{content:""}.el-icon-orange:before{content:""}.el-icon-pear:before{content:""}.el-icon-apple:before{content:""}.el-icon-cherry:before{content:""}.el-icon-watermelon:before{content:""}.el-icon-grape:before{content:""}.

moyuderen

遇到相同问题

tzcodingjs

config.module.rules .filter((rule) => { return rule.test && 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"), }); }); });

用css-unicode-loader把dart-sass编译的图标转换一下

undefined9999

vue.config.js中将css.sass.sassOptions.outputStyle设为expanded即可

toesbieya

css: { loaderOptions: { sass: { prependData: @import "@/styles/variables.scss";, //引入全局变量 // outputStyle: "expanded", sassOptions: { outputStyle: "expanded" }, // 解决dart-sass导致的偶发性乱码 }, }, },

Boom-BO

直接import源包的icon.css试试，，@import "element-ui/packages/theme-chalk/lib/icon.css";

UniqueCrownClown

啥原理..

chengfengfengwang

解决办法：npm install --save-dev css-unicode-loader

如果是vuecli3+ 则可以按如下配置

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

wuyinxing

[ElemeFE/element][Bug Report] 使用dart-sass打包element icon出现乱码

回答