'Font awesome' соответствующий загрузчик для обработки

Я пытаюсь включить шрифт awesome в свое приложение для реагирования, и это шаги, которые я выполнил.

 1. npm install --save font-awesome

 2. Import it to my jsx file

 import '../../../../../../node_modules/font-awesome/css/font-awesome.min.css';

 3. Adding url-loader to my webpack.config.js 

            {
                test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/,
                loader: 'url-loader?limit=100000'
            }

Но я получаю эту проблему. Как я могу это исправить?

../~/font-awesome/css/font-awesome.min.css Ошибка синтаксического анализа модуля: C:\Users\admin\Documents\revegator-platform\node_modules\font-awesome\css\font-awesome. min.css Неожиданный символ '@' (4:3). Возможно, вам потребуется соответствующий загрузчик для обработки файлов этого типа.

Мой webpack.config.js

'use strict';
let path = require('path');

module.exports = {
    entry: path.resolve('./src/main.js'),
    output: {
        path: path.resolve('../public/js'),
        filename: 'build.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test:  /\.s[a|c]ss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    }
};

webpack font-awesome urlloader
person CraZyDroiD    schedule 10.08.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Очевидно, вы поддерживаете sass в своем приложении, так почему бы не использовать ресурсы scss с потрясающими шрифтами? Это должно дать вам возможность загружать только то, что вам нужно, тем самым уменьшая окончательный размер CSS.

Убедитесь, что у вас есть следующие пакеты

 npm i --dev "css-loader" "file-loader" "node-sass" "sass-loader" "style-loader" "url-loader"

обновите ваш webpack.config, чтобы он содержал следующие загрузчики

    { test: /\.s[a|c]ss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] },
    { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
    { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' }

в вашем компоненте

import 'font-awesome/scss/font-awesome.scss'
person Community    schedule 10.08.2017
comment
3 года спустя это помогло мне, когда я решил удалить поддержку шрифтов eot и svg из своего приложения, и font-awesome выдал описанную ошибку OP. - person JamesJGoodwin; 11.01.2021