代码之家 › 专栏 › 技术社区 › Imnotapotato

通过网页包加载字体:字体不加载

angular-fontawesome urlloader font-awesome webpack javascript

Imnotapotato · 技术社区 · 6 年前

这是我的网页包配置:

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
    }

};

@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

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屏幕快照

2 回复 | 直到 6 年前

FabioCosta 6 年前

更新

在github文件的基础上,您的目标是php文件上不变的css。将不会被网页包解析的,请将其删除。

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

那你用的是 mini css extract plugin 要将css复制到某个地方,需要加载该文件。根据您当前的配置,它将在css文件夹上保存一个级别:

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

不管这个文件输出什么,你都应该加载 不是原来的main.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加载器也有 url=false 不会被调用 . 从加载程序中删除url:false。然后只是一个玩文件加载器选项的例子,您可以更改 public-path 去任何你存储的文件,它们会被替换在 生成的css 和 output path

总结起来:

如果要替换url和加载程序,请删除url:false from css加载程序并确保字体文件regex与它们匹配。
为避免混淆,请将所有输出存储在单独的文件夹中,并检查放在何处。

第一个答案:

如果你已经在使用字体和网页,我建议你使用 font-awesome-loader .

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

因此,让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上的字体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。

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

如果您检查CSS,它将通过给定的路径引用文件,并且您选择url加载器,因此路径将不匹配。如果你换成 file-loader

szegheo 6 年前

我刚发了一封信 detailed answer on another similar question 这样地。这可能会对您有所帮助,而且还包括另一种可能的解决方案,即将FontAwesome5与SVG+JS结合使用的新方法。有了它,就不需要字体文件、网页包加载器等了。。。在你的房间里多放几行 JavaScript 代码。