Шрифт snowpack woff2 не загружается

Question

Снежный покров супер быстрее, чем веб-пакет. но я получаю некоторую проблему, например, когда я импортирую font-awesome, мой проект реакции не работает. потому что Snowpack не загружает файл шрифта (.woff2).

Официальный сайт snowpack не по этой теме.

теперь как исправить?

Answer 1

Ну, сейчас это боль. Я объясню почему.

Теория:

1. [ Пропустить вниз, если вы не используете PostCSS] Используйте Snowpackplugin-postcssвместе с PostCSSpostcss-importплагин. Ваша конфигурация PostCSS может выглядеть так:

      module.exports = {
  plugins: {
    'postcss-import': {},
    // Other plugins...
  }
}

2. Если вы не хотите исправлять все @font-faceпути, ваш CSS должен находиться в подпапке, например css/app.css, потому что Font Awesome CSS импортирует шрифты шрифты относительным образом ( ../webfonts).

      @import '@fortawesome/fontawesome-free/css/all.css';

/** Your CSS rules... **/

3. Последний шаг, вы должны отразить node_modules/@fortawesome/fontawesome-free/webfontsкаталог в каталог вашего назначения сборки (мой _dist). Это можно легко решить с помощью следующего кода в вашем файле :

      "mount": {
  "node_modules/@fortawesome": {
    "url": "/webfonts",
    "static": true,
    "resolve": false
  }
}

Но из-за этой проблемы он не будет работать в продакшене , в основном Snowpack не может зеркально отображать что-либо из node_modulesпотому что эта папка жестко исключена.

Я нашел обходной путь, используяncp package( npm i --save-dev ncp) и@snowpack/plugin-run-script. Добавьте плагин в snowpack.config.jsи установите cmdвариант выглядеть так:

      "plugins": [
  ["@snowpack/plugin-run-script", {
    "cmd": "ncp node_modules/@fortawesome/fontawesome-free/webfonts/ _dist/webfonts"
  }]
]

Это скопирует содержимое папки Font Awesome в корневую веб-папку с именем webfonts, поэтому относительный импорт CSS будет работать.

Если вы не используете PostCSS, смонтируйте папку на шаге 3 (будет работать в режиме разработки, а не в производстве), используйте ncpкак объяснено (решит проблему в производстве) и добавьте эту строку в точку входа JavaScript вашего приложения:

      import '@fortawesome/fontawesome-free/css/all.css';