2

我正在使用 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防止它复制文件，但路径仍在更改中。

4

2 回答 2

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`);
于 2017-01-30T05:22:50.797 回答
0

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

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

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

其中说使用 publicPath aspublic并创建一个具有名称的文件，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无需任何更多配置。

于 2017-01-30T04:18:11.913 回答