通过 Webpack 加载 FontAwesome：字体不加载

Question

我试图了解如何在通过 scss 文件加载字体时通过 fontawsome 加载字体：

这是我的 webpack 配置：

const path                      = require('path');
const webpack                   = require('webpack');
const UrlLoader                 = require('url-loader');
const BrowserSyncPlugin         = require('browser-sync-webpack-plugin');
const VueLoaderPlugin           = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin      = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin   = require('optimize-css-assets-webpack-plugin');

publicFolder                    = path.resolve(__dirname, 'public');
// appFolder                        = path.resolve(__dirname, 'app');

module.exports = {

    entry: { 
                // Selects main js file
                main:   './public/es6/index.js'
    },

    output: {
                // Main path for the js folder
                path:       path.resolve(__dirname, 'public/js/'),
                // Select teh name the main js file (after compression)
                filename:   'bundle.js',
                // Public path 
                // publicPath: 'http://localhost:8080', 
                publicPath: '/public/js/',
                // Name the chunkFile (in case of external scripts)
                chunkFilename: '[name].[contenthash].js'
    },

    module: {
                rules: [    // Vue Files 
                            {
                                test: /\.vue$/,
                                exclude: /node_modules/, 
                                loader: 'vue-loader', 
                                options: {
                                            loader: {
                                                scss: 'vue-style-loader!css-loader!sass-loader', 
                                                css: 'vue-style-loader!css-loader'
                                            }
                                }
                            },
                            // JS files 
                            {
                                test:       /\.js$/,
                                exclude:    /node_modules/,
                                use: {
                                        loader: "babel-loader"
                                }
                            },
                            // CSS / SASS files 
                            {
                                test: /\.(sa|sc|c)ss$/,
                                // test: /\.scss$/,
                                use: [
                                        {
                                            loader: MiniCssExtractPlugin.loader,
                                        },
                                        {
                                            loader: 'css-loader',
                                            options: {
                                                        url: false,
                                                        minimize: true,
                                                        sourceMap: true
                                            }
                                        },
                                        {
                                            loader: 'postcss-loader'
                                        },
                                        {
                                            loader: 'sass-loader',
                                            options: {
                                                        sourceMap: true, 
                                                        minimize: true
                                            }
                                        }
                                ]
                            },
                            // Forgot why I need this... 
                            {
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [{
                                    loader: 'url-loader',
                                    options: {
                                      limit: 100000
                                    }
                                }]
                            }
                ]
    },
    plugins: [  
                // Load jQuery globally 
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                    'window.jQuery': 'jquery'
                }),

                // Hot module
                // new webpack.HotModuleReplacementPlugin(),

                // BrowserSync: Load page automatically on change
                new BrowserSyncPlugin({
                    proxy: 'https://potato.mywebsite.com/', 
                    port: 3000, 
                    files: [
                        '**/*.php'
                    ], 
                    ghostMode: {
                        clicks: false, 
                        location: false, 
                        forms: false, 
                        scroll: false
                    }, 
                    minify: false,
                    injectChanges: true, 
                    logFileChanges: true, 
                    logLevel: 'debug', 
                    logPrefix: 'webpack', 
                    notify: true, 
                    reloadDelay: 0
                }),

                // Provides a way to customize how progress is reported during a compilation
                new webpack.ProgressPlugin(),

                // Loads Vue
                new VueLoaderPlugin(), 

                // For webpack-dev-server (currently not in use)
                // new webpack.HotModuleReplacementPlugin(), 

                // Handle css in different files (scss file in login.js for example to a hashed login.css file)
                new MiniCssExtractPlugin({ filename: '../css/[name].css' }), 

                // CSS assets during the Webpack build and will optimize \ minimize the CSS
                new OptimizeCSSAssetsPlugin({}),

                // Not sure if needed yet
                new webpack.NamedModulesPlugin()

    ],
    devServer: {
                    // https:       true,
                    headers:        { 'Access-Controll-Allow-Origin': '*' },
                    compress:       true, 
                    quiet:          true, 
                    hot:            true,
                    inline:         true
    }

};

这是我的 SCSS 文件，我在其中加载 FontAwesome（和其他）..

@import 'variable';

// Colors
@import 'colors/default';
@import 'colors/green';
@import 'colors/megna';
@import 'colors/purple';
@import 'colors/red';
@import 'colors/blue';
@import 'colors/blue-dark';
@import 'colors/default-dark';
@import 'colors/green-dark';
@import 'colors/red-dark';
@import 'colors/megna-dark';
@import 'colors/purple-dark';  


// Import Bootstrap source files
@import "../../node_modules/bootstrap/scss/bootstrap";


// This is for the icons
@import '../assets/icons/font-awesome/css/fontawesome-all.css';
@import '../assets/icons/simple-line-icons/css/simple-line-icons.css';
@import '../assets/icons/weather-icons/css/weather-icons.min.css';
@import '../assets/icons/themify-icons/themify-icons.css'; 
@import '../assets/icons/flag-icon-css/flag-icon.min.css';
@import "../assets/icons/material-design-iconic-font/css/material-design-iconic-font.min.css";


// This is the core files
@import 'core/core';
@import 'widgets/widgets';
@import 'responsive';


// In This scss you can write your scss
@import 'custom';

当运行 npm run dev（或其他）时，我没有收到任何提及字体的错误。

加载我的网站时，我在 "network" 面板中获得了这些 URLS 引用：

https://mywebsite.potato.com/public/webfonts/fa-regular-400.woff
https://mywebsite.potato.com/public/fonts/Simple-Line-Icons.ttf?-i3a2kk

指向我的目录中甚至不存在的字体文件（或者至少没有创建..）

如何正确加载字体？

编辑：

为@FabioCosta 添加这个

{
    test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
    use: [
            {
                loader: 'file-loader',
                options: {
                    name:       '[name].[ext]',
                    // name:        '[path][name].[ext]',
                    outputPath: '/public/fonts/',
                    publicPath: '/public/fonts/'
                }
             }
    ]
}

添加完整的模块部分：

module: {
            rules: [    // Vue Files 
                        {
                            test: /\.vue$/,
                            exclude: /node_modules/, 
                            loader: 'vue-loader', 
                            options: {
                                        loader: {
                                            scss: 'vue-style-loader!css-loader!sass-loader', 
                                            css: 'vue-style-loader!css-loader'
                                        }
                            }
                        },
                        // JS files 
                        {
                            test:       /\.js$/,
                            exclude:    /node_modules/,
                            use: {
                                    loader: "babel-loader"
                            }
                        },
                        // CSS / SASS files 
                        {
                            test: /\.(sa|sc|c)ss$/,
                            // test: /\.scss$/,
                            use: [
                                    {
                                        loader: MiniCssExtractPlugin.loader,
                                    },
                                    {
                                        loader: 'css-loader',
                                        options: {
                                                    url: false,
                                                    minimize: true,
                                                    sourceMap: true
                                        }
                                    },
                                    {
                                        loader: 'postcss-loader'
                                    },
                                    {
                                        loader: 'sass-loader',
                                        options: {
                                                    sourceMap: true, 
                                                    minimize: true
                                        }
                                    }
                            ]
                        },
                        {
                            test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                            use: [
                                    {
                                        loader: 'file-loader',
                                        options: {
                                            // name:        '[path][name].[ext]',
                                            name:       '[name].[ext]',
                                            outputPath: '/public/fonts/',
                                            publicPath: '/public/fonts/'
                                        }
                                     }
                            ]
                        }

已尝试以下操作：https://chriscourses.com/blog/loading-fonts-webpack 似乎不起作用。

正在添加 CSS 屏幕截图

Answer 1

更新

基于 github 文件，您的目标是 php 文件上未更改的 css。那不会被webpack解析的，去掉。

<link rel="stylesheet" type="text/css" href="css/main.css">

如果你运行 npm 运行构建你的入口点是 JS 文件，这将是通过 webpack 解析的 JS 文件，它将生成你的所有文件并且需要包含在内。

那么您正在使用 mini css extract plugin 将您的 css 复制到某个地方，您需要加载该文件。根据您当前的配置，它在 css 文件夹上保存了一层：

new MiniCssExtractPlugin({ filename: '../css/[name].css' }),

无论此文件输出什么，都是您应该加载的内容 而不是原始 main.css，因此根据您当前的文件夹结构，此文件将位于一级 UP 路径中。如果您使用 ./css/[name].css ，如果我没记错的话，它应该输出到您期望的位置。

作为旁注，您似乎对源文件和输出文件使用了同一个文件夹。尽量移动到单独的文件夹，这样你就不会不情愿地覆盖任何东西。

最后是字体： loader的测试需要匹配你的字体

src: url("../webfonts/fa-brands-400.eot");

不符合测试：

test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

您可能希望将最后一部分设为可选

test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)?/,

您的 css-loader 也可以 url=false so the font resolver would never be invoked. Remove the url: false from your loader. Then is just a case of playing with the options of the file-loader, you can change the public-path to go to whatever you store your files and they would be replaced on the generated css and output path 将它们复制到所需位置。

总结一下：

检查您是否正在导入正确的 css 文件，重命名文件并查看它的位置（如果您需要保证）
如果您想要替换 url 和加载程序，请从 css-加载程序中删除 url:false 并确保字体文件正则表达式与它们匹配。
为避免混淆，将所有输出存储在单独的文件夹中，并检查放在哪里。

第一个回答：

如果你已经在使用 font-awesome 和 webpack 我建议你使用 font-awesome-loader.

那将是加载它们的最简单方法，但更深入的解释是基本上每个文件扩展名 webpack 都需要一个加载器来处理它。它将适当地处理文件并将其内容放在某个地方。

所以让webpack加载fontawesome字体的步骤是：

在您的项目中安装 font awesome package（或将资产放在某个固定位置）。

使用如下加载器加载字体文件

module.exports = {
    module: {
        loaders: [
        // the file-loader will copy the file and fix the appropriate url
        {
            test: /\.(ttf|eot|svg|woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader",
            options: {
            name: "[name].[ext]",
            outputPath: "fonts/", 
            publicPath: "../fonts/"
            }
        }
        ]
    }
};

从 css.

所以在这部分分析你的代码：

        // Forgot why I need this... 
        {
            test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }]
        }

您决定通过 url-loader 加载所有这些扩展，以便它们成为 base64 URI。

您在此处加载了所有很棒的字体 css

@import '../assets/icons/font-awesome/css/fontawesome-all.css';

如果您检查 CSS 它正在通过给定路径引用文件并且您选择 url-loader 因此路径将不匹配。如果您更改为 file-loader 并使选项与适当的路径相匹配，它将把文件复制到那里，您应该已经准备就绪。

Answer 2

我刚刚发布了一个这样的帖子。这可以帮助你，还包括另一种可能的解决方案，即使用 FontAwesome5 和 SVG+JS 的新方法。有了它，就不需要字体文件、Webpack 加载器等……只需在 JavaScript 代码中多加几行。

(希望这样发帖不违规，那个又是一篇长文，我不想复制粘贴，应该吗？我不认为可以在这里使用重复的标志...)

通过 Webpack 加载 FontAwesome：字体不加载

Loading FontAwesome via Webpack: Fonts do not load

javascript

urlloader

font-awesome

webpack

angular-fontawesome