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

[moyuderen]

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

Reproduction Link

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

Steps to reproduce

直接yarn build

What is Expected?

图标正确显示

What is actually happening?

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:""}.

[tzcodingjs]

遇到相同问题

[undefined9999]

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编译的图标转换一下

[toesbieya]

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

[Boom-BO]

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

[UniqueCrownClown]

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

[chengfengfengwang]

啥原理..

[wuyinxing]

解决办法：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")})
        })
      })
    }
}