Webpacker с 4.2.2 по 5.1.1: больше не находит значки элементов, используемые в пользовательском интерфейсе Element

#javascript #ruby-on-rails #ruby-on-rails-5 #webpacker #element-ui

#javascript #ruby-on-rails #ruby-on-rails-5 #webpacker #element-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» был удален
  • «»кэш»: true», был удален
  • в разделе «»загрузчик»: «sass-loader»» в разделе «параметры» добавлено следующее:
       "sassOptions": {
         "includePaths": []
       }
  
  • в разделе «плагины» выше добавлен «»logger»: {},»»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, 0, {
  loader: 'resolve-url-loader'
});
  

Который помещает его прямо над «загрузчиком sass»:

   {
    "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",
          "options": {
            "sourceMap": true,
            "sassOptions": {
              "includePaths": []
            }
          }
        }
      ],
      "sideEffects": true,
      "exclude": {}
    }
  },
  

Мысли?

Обновление: я постепенно обновил webpacker, чтобы увидеть, где это происходит:

  1. 4.2.2: значки элементов загружаются просто отлично.
  2. 4.3.0: значки элементов загружаются просто отлично.
  3. 5.0.0: не загружаются значки элементов.
  • версия webpack не изменилась
  • мини-css-extract-плагин изменен с 0.8.2 на 0.9.0
  • файловый загрузчик изменен с 4.3.0 на 5.1.0
  1. 5.0.1: не загружаются значки элементов.