Как заставить Font awesome 5 работать с веб-пакетом - PullRequest
Новая
       10

Как заставить Font awesome 5 работать с веб-пакетом

0 голосов
/ 18 сентября 2018

Я пытаюсь использовать Fontawesome в своем проекте Flask / webpack.

Самое безумное, что в какой-то момент это сработало, затем остановилось, я изменил что-то глупое, снова заработало и, наконец, перестало работать полностью.

Что у меня есть:

Конфигурация пакета: 

  "devDependencies": {
        ...
        "css-loader": "^1.0.0",
        "node-sass": "^4.9.3",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "webpack": "^4.19.0",
        "webpack-cli": "^3.1.0",
        "webpack-merge": "^4.1.4"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.3.1",
        "bootstrap": "^4.1.3",
         ...
    }

Конфигурация веб-пакета (раздел правил): 

   test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
            name: '[name].[ext]',
            outputPath: '../fonts/',  
            publicPath: '../static/fonts' 
            }
        }]
    },
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    },
    {
        test: /\.scss$/,
        use: [
            "style-loader", 
            "css-loader", 
            "sass-loader" 
        ]
    },

веб-пакет, раздел ввода: 

entry: {
        myStyles: './stles/myStyles.js'
    },

myStyles.js: 

import fontawesome from "@fortawesome/fontawesome-free/scss/fontawesome.scss";
import regular from "@fortawesome/fontawesome-free/scss/regular.scss";
import solid from "@fortawesome/fontawesome-free/scss/solid.scss";
import brands from "@fortawesome/fontawesome-free/scss/brands.scss";

fontawesome.library.add(solid, regular, brands)

Последняя строка вызвала ошибку в Chrome: 

Uncaught TypeError: Cannot read property 'add' of undefined

Я также попытался добавить импорт в мою запись scss, и в какой-то момент это сработало, а затем остановилось: 

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

Итак, наконец, в моем шаблоне у меня есть: 

<i class="fas fa-user-circle fa-fw"></i>

и я вижу только квадраты.

Я проверил Chrome, шрифты загружены (ttf, woff, woff2).

Пожалуйста, помогите. Я уже потратил более 6 (!!!!) часов впустую на эту проблему, и это больше, чем я потратил на что-либо еще, связанное с webpack.

UPD Я думаю, я понял это. Я обнаружил, что мой публичный путь был неверным, я имею в виду эту часть конфигурации webpack: publicPath: '../static/fonts' - в настоящее время он указывает на папку static / fonts на один уровень выше моего html. Во-первых, относительный путь неверен сам по себе, во-вторых, относительный путь не будет работать для других папок, в-третьих, я изменил его на относительный к корню: '/ static / fonts', и он сработал.

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

В моем проекте ( HTML Starter с webpack 4 .26.1) я добавил FontAwesome с помощью двух вариантов:

1.Установлено и добавлено

Я только что установил FontAwesome Free (v5.5.0) 

npm install --save-dev @fortawesome/fontawesome-free

, и я добавил к index.js

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

Исходный код / Фиксация

2.Используется с установленным API / SVG

I FontAwesome (svg-core, бренды-значки, обычные значки, сплошные значки) 

npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

и я добавилв файл JS 

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab) 

dom.i2svg()

Исходный код с комментариями / Подтверждает

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

Просто импортируйте этот файл в ваш myStyle.js 

import '@fortawesome/fontawesome-free/js/all'

или вы можете импортировать только иконки определенного размера 

import '@fortawesome/fontawesome-free/js/light'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/brands'

Я думаю, что fontawesome.library.add () не нужен.

...