Question

我正在使用Laravel 5.4和Laravel Mix来输出SASS文件。

在我的字体定义中，我正在配置它们，以便在输出CSS时它将指向public/assets/fnt/font-name/filename.ext之类的文件，但处理器会更改输出，使其指向public/fonts/filename.ext。有没有办法阻止它改变输出路径？

默认情况下，我会做这样的事情。

修改

我已经看到他们在Mix中使用的默认值是罪魁祸首：

module.exports.module = {
    rules: [
        // ...
        {
            test: /\.(woff2?|ttf|eot|svg|otf)$/,
            loader: 'file-loader',
            options: {
                name: 'fonts/[name].[ext]?[hash]',
                publicPath: '/'
            }
        }
    ]
};

我尝试使用null-loader代替file-loader但是它会导致它失败，因为它找不到node_modules中的文件，而这些文件不在它应该查看的位置第一名。

删除相关规则会导致尝试打开和评估相关字体文件时出现大量错误：

 error  in ./public/assets/fnt/fanfare-jf/fanfare-jf.ttf

Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap&precision=8!./resources/assets/sass/app.scss 6:2525-2590
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

我至少可以将emitFiles: false添加到options以防止它制作文件的副本，但路径仍然在被更改。

Answer 1

由于您的配置，您获得的输出是预期的行为。

您正在使用此配置加载文件：

        options: {
            name: 'fonts/[name].[ext]?[hash]',
            publicPath: '/'
        }

其中使用publicPath作为public并创建名为fonts/[name].[ext]?[hash]的文件，webpack知道名称中的这些符号'/', '.', '?'。

它只查找fonts目录，如果没有任何字体目录，则会创建一个新目录并将文件放入该目录。

因此，您需要将此配置用于文件夹结构：

options: {
    name: 'assets/fnt/font-name/[name].[ext]?[hash]',
    publicPath: '/'
}

这适用于您的配置。

有关file-loader配置的更多信息：

https://github.com/webpack-contrib/file-loader#filename-templates

修改：

由于Laravel Mix在后台使用Webpack，因此当配置中没有添加任何适当的加载程序时，Webpack对字体文件一无所知。所以，错误：

Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.

发生了

。

您需要告诉Webpack将字体加载到您想要的目录中，SASS文件中链接的字体将由Webpack链接，而不再进行任何配置。

Answer 2

我最终得到了以下配置，至少让它达到了工作状态。

{
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]?[hash]',
        publicPath: '/',
        context: 'public',
        emitFile: false
    }
}

Laravel Mix和SASS更改字体目录

2 个答案: