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（或其他）时，提及字体没有任何错误。

在加载我的网站时，我在“网络”面板中获得了这些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 run build，则入口点是JS文件，这将是通过webpack解析的JS文件，它将生成您的所有文件，并且需要包括在内。

然后您正在使用mini css extract plugin将CSS复制到某个地方，您需要加载该文件。根据您当前的配置，它可以将一级保存在css文件夹中：

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

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

在这里，请注意，似乎您正在使用同一文件夹作为源和输出。尝试移动到单独的文件夹中只是为了避免不必要地覆盖任何内容。

最后是字体：加载程序的测试需要匹配您的字体

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，因此字体解析器将永远不会被调用。从加载程序中删除网址：false。这只是使用文件加载器选项的一种情况，您可以将public-path更改为存储文件的位置，然后将它们替换为生成的CSS ，然后output path将其复制到所需位置。

总结一下：

检查是否要导入正确的css文件，重命名该文件，并在需要保证的情况下查看其位置
如果要替换url和loader，请从css-loader中删除url：false并确保正则表达式的字体文件与之匹配。
为避免混淆，请将所有输出存储在单独的文件夹中，并检查放置在何处。

第一个答案：

如果您已经在使用font-awesome和webpack，我建议您使用font-awesome-loader。

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

因此，使webpack加载字体很棒的步骤是：

在项目中安装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上的font-awesome加载适当的CSS / SCSS / LESS。

因此，在此部分分析您的代码：

        // 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 CSS

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

如果检查CSS，它将通过给定路径引用文件，然后选择url-loader，因此路径将不匹配。如果您更改为file-loader并使选项与相应的路径匹配，它将复制文件到那里，并且应该都准备好了。

Answer 2

我刚刚这样发布了detailed answer on another similar question。这可能会为您提供帮助，并且还包括另一个将FontAwesome5与SVG + JS一起使用的新方法的解决方案。这样，就不需要字体文件，Webpack加载器等了。JavaScript代码中仅需多几行。

（我希望发布这样的答案不违反规则。那是篇很长的文章，我不想复制粘贴。我应该吗？我不认为重复标记可以在这里使用...）

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

2 个答案: