Загрузка шрифтов из node_modules в приложении Reaction-Rails с веб-пакетом - PullRequest
Новая
       60

Загрузка шрифтов из node_modules в приложении Reaction-Rails с веб-пакетом

0 голосов
/ 09 октября 2018

У меня есть приложениеact-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/.

1 Ответ

0 голосов
/ 09 октября 2018

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 , посмотрите на конфигурацию и прочитайте документацию treeshaking .

...