Загрузите шрифты из node_modules в приложении act-rails с помощью веб-пакета

Question

У меня есть приложение response-rails, настроенное с помощью webpacker.

Я пытаюсь загрузить font-awesome-pro с его шрифтами из node_modules.

Я предполагаю, что это тривиальная задача, но я не могу найти хорошую документацию о том, как это сделать.

Это то, что я до сих пор:

зависимости package.json:

  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.1.3",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-slick": "^0.23.1",
    "react_ujs": "^2.4.4",
    "slick-carousel": "^1.8.1",
    "tachyons-z-index": "^1.0.9"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-pro": "^5.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "file-loader": "^2.0.0",
    "path": "^0.12.7",
    "webpack-dev-server": "2.11.2"
  }

file.js:

var path = require('path');

module.exports = {
  test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    exclude: path.resolve(__dirname, '../../app/assets'),
    use: {
      loader: 'file-loader',
      options: {
        outputPath: 'fonts/',
        useRelativePath: false
      }
    }
}

environment.js

const { environment } = require('@rails/webpacker')
const file = require('./file')

environment.loaders.prepend('file', file)

module.exports = environment

application.scss:

@import '@fortawesome/fontawesome-pro/scss/fontawesome.scss';

application.rb:

config.assets.paths << Rails.root.join('node_modules')

Что мне не хватает? Из того, что я могу собрать, веб-пакет должен смотреть на node_modules каталог, поиск файлов шрифтов на основе веб-пакета test и помещаем активы в выходной каталог: fonts/,

Answer 1

FontAwesome с веб-шрифтами:

Для меня с бесплатной версией пример ниже работает хорошо. Я не знаю про версию, но если я не ошибаюсь, вам просто нужно переименовать fontawesome-free в fontawesome-pro в пути.

application.scss:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";

В SCSS ~ (импорт тильды) означает, что искать ближайший node_modules каталог. Не все компиляторы SASS это поддерживают, но node-sass делает, и это общее для Webpack.

Таким образом, в вашем html вам нужно только использовать application.css, Нет необходимости включать какие-либо другие файлы FontAwesome CSS.

Ваша конфигурация загрузчика шрифтов, кажется, в порядке (проверено, работает). С этим Webpack должен разрешить файлы шрифтов, а затем скопировать их в нужный вывод, как вы хотели. Это нужно, чтобы ваш css-loader быть настроен с url: true но я это по умолчанию.

Минимальная / обычная конфигурация для загрузчиков в вашем файле конфигурации Webpack:

module: {
  rules: [
    {
      test: /\.s?css$/,
      use: [
        MiniCssExtractPlugin.loader, // optional (the most common way to export css)
        "css-loader", // its url option must be true, but that is the default
        "sass-loader"
      ]
    },
    {
      // find these extensions in our css, copy the files to the outputPath,
      // and rewrite the url() in our css to point them to the new (copied) location
      test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: {
        loader: 'file-loader',
        options: {
          outputPath: 'fonts/'
        }
      }
    }
  ]
},

Загрузка только необходимых шрифтов (новый способ с JS и SVG)

Опять же, я продемонстрирую это с бесплатной версией, потому что у меня нет про версии.

Таким образом, ваш сгенерированный пакет будет содержать только те значки, которые вам нужны, что приведет к гораздо меньшему размеру, что означает более быструю загрузку страницы. (Я использую это в своих проектах)

Необходимые пакеты:

@fortawesome/fontawesome-svg-core
@fortawesome/free-brands-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-solid-svg-icons

Включите это в свой файл scss:

@import "~@fortawesome/fontawesome-svg-core/styles";

Создайте новый файл, назовите его fontawesome.js:

import { library, dom, config } from '@fortawesome/fontawesome-svg-core';

config.autoAddCss = false;
config.keepOriginalSource = false;
config.autoReplaceSvg = true;
config.observeMutations = true;

// this is the 100% working way (deep imports)
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';

// this is the treeshaking way (better, but read about it below)
import { faUser, faHome } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faYoutube } from '@fortawesome/free-brands-svg-icons';

library.add(faUser, faHome, faFacebook, faYoutube);
dom.watch();

.. а затем потребовать это где-то в вашем JS:

require('./fontawesome');

Это все. Если вы хотите узнать больше об этом, начните с понимания SVG JavaScript Core, посмотрите на его конфигурацию и прочитайте документацию по Treehaking.