Laravel Mix和SASS更改字体目录

我使用Laravel5.4和LaravelMix来输出SASS文件

在我的字体定义中，我将对它们进行配置，以便在输出CSS时，它将指向文件，如

public/assets/fnt/font-name/filename.ext

，但处理器更改输出，使其改为指向

public/font/filename.ext

。有没有办法阻止它更改输出路径

默认情况下，它会这样做，这对我来说毫无意义

编辑

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

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: {
            name: 'fonts/[name].[ext]?[hash]',
            publicPath: '/'
        }

这表示将publicPath用作

public

，并创建一个名为

font/[name].[ext]？[hash]

的文件，webpack知道名称中这些符号的作用

它只查找

字体

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

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

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

这应该适用于您的配置

有关

文件加载器

配置的详细信息：

编辑：

因为

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.

发生了什么

---

您需要告诉网页将字体加载到所需目录，并且

SASS

文件中链接的字体将由

Webpack

链接，无需任何其他配置

我最后使用了以下配置，以至少使其处于工作状态

let assetDir = 'assets/build';

mix.config.fileLoaderDirs.fonts = `${assetDir}/${mix.config.fileLoaderDirs.fonts}`;
mix.config.fileLoaderDirs.images = `${assetDir}/${mix.config.fileLoaderDirs.images}`;

mix.sass('resources/sass/app.scss', `public/${assetDir}/css`)
   .js('resources/js/app.js', `public/${assetDir}/js`);

更新：

在较新版本中，可通过

mix.options（）

进行自定义，并可按如下方式进行调整：

let assetDir = 'assets/build';

mix.options({
    fileLoaderDirs: {
        images: `${assetDir}/img`,
        fonts: `${assetDir}/fonts`
    }
});

// adjust build commands accordingly, for example:
mix.js('resources/js/app.js', `public/${assetDir}/js`);

---

我列出的配置是由Laravel Mix中的默认值强加给我的。我不想让它复制文件或任何东西。给定的配置导致它重新复制文件。我不在乎它想做什么。我知道文件已经存在于我指定的位置。我希望它完全不打扰我。因此，在我看来，你不想使用

Laravel Mix

？如果你将你的视图定义为“不想使用一个小组件意味着你根本不想使用整个东西”，那么是的。在这种情况下，我花了整整一天的时间从10点到23:30试图让它不去管我的URL。如果你不想使用文件加载器来加载你的字体文件，那么你可以简单地删除包含你的

字体的规则
{test://\（woff2？| ttf | eot | svg | otf）$/，…}
。这就是我对您的场景的理解。如果我删除该规则，它将尝试加载和评估CSS指令中引用的文件，但构建失败。您的意思是将此问题标记为Webpack-2吗？配置结构在处理加载器和选项时会有很大的不同。是的，这是正确的。