Webpacker 4.2.2至5.1.1：不再找到元素UI中使用的元素图标

问题描述

我一直在尝试确定此更新所做的更改，这些更改会导致图标无法正确呈现。我没有在浏览器中收到任何错误，但是我发现它不再尝试加载字体文件（以前是/packs/media/fonts/element-icons-xxx.woff）

manifest.json包含文件的条目：

"media/fonts/element-icons.woff": "/packs/media/fonts/element-icons-313f7dac.woff",

我已经比较了生成的webpack.config.js，看到的更改很少：

• “ output.pathinfo：true”已被删除
• ““缓存”：是，”已删除
• 在““ loader”：“ sass-loader”“下，在” options“下添加了以下内容：

      "sassOptions": {
         "includePaths": []
       }

• 在“插件”下的““记录器”：{}，”下已添加到““ pathCache”：{}，”

当前正在通过babel.config.js在插件下加载主题：

      [
        "component",{
          "libraryName": "element-ui","styleLibraryName": "theme-chalk"
        }
     ]

但是我也尝试使用以下方法在主入口点导入它： import 'element-ui/lib/theme-chalk/index.css'; 结果相同。

我已按照某些帖子的建议添加了“ resolve-url-loader”：

environment.loaders.get('sass').use.splice(-1,{
  loader: 'resolve-url-loader'
});

将其放在“ sass-loader”上方：

  {
    "key": "sass","value": {
      "test": {},"use": [
        "/Users/tom/LGL_DEV/lgl/node_modules/@rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js",{
          "loader": "css-loader","options": {
            "sourceMap": true,"importLoaders": 2,"modules": false
          }
        },{
          "loader": "postcss-loader","options": {
            "config": {
              "path": "/Users/tom/LGL_DEV/lgl"
            },"sourceMap": true
          }
        },{
          "loader": "resolve-url-loader"
        },{
          "loader": "sass-loader","sassOptions": {
              "includePaths": []
            }
          }
        }
      ],"sideEffects": true,"exclude": {}
    }
  },

有想法吗？

更新：我已经逐步更新了webpacker来查看中断的地方：

1. 4.2.2：元素图标加载正常。
2. 4.3.0：元素图标加载正常。
3. 5.0.0：未加载元素图标。

• webpack版本未更改
• mini-css-extract-plugin从0.8.2更改为0.9.0
• 文件加载器从4.3.0更改为5.1.0

1. 5.0.1：未加载元素图标。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）