Laravel 混合 SASS 更改字体目录

Question

我正在使用 Laravel 5.4 和 Laravel 混合输出 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

我最终进行了以下配置，至少可以使其进入工作状态。

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 混合 SASS 更改字体目录

Laravel Mix and SASS changing font directory

laravel

sass

webpack

webpack-2

laravel-5.4