Laravel Mix 生成字体到另一个目录答案

【问题标题】：Laravel Mix generate fonts into another directoryLaravel Mix 生成字体到另一个目录
【发布时间】：2018-11-24 10:04:31
【问题描述】：

我正在使用laravel-mix，它建立在webpack 的顶部。我正面临字体目录的问题。例如，font-awesome 包有一个 scss 文件和一个放置所有字体的字体目录。

font-awesome:.
├───scss
│       fontawesome.scss
└───webfonts
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2

所以我把这个包放在我的resources/assets/sass 目录中。

resources:.
└───asset
    └───sass
        │   main.scss
        │
        └───font-awesome (directory)

main.scss 包含代码：

@import 'font-awesome/scss/fontawesome';

webpack.mix.js 包含：

mix.sass('resources/assets/sass/main.scss', 'public/css/frontend.css');

所有资产均已成功编译。现在public 目录有css 和font 目录，里面所有的字体都是这样的。

public:.
│   index.php
│
├───css
│       frontend.css
│
├───fonts
│       fa-regular-400.eot
│       fa-regular-400.svg
│       fa-regular-400.ttf
│       fa-regular-400.woff
│       fa-regular-400.woff2

但我想要的是，我不想将所有字体编译到public/fonts 目录中，我想编译为以下结构public/fonts/vendor/font-awesome

public:.
├───css
│       frontend.css
│
└───fonts
    └───vendor
        └───font-awesome
                fa-regular-400.eot
                fa-regular-400.svg
                fa-regular-400.ttf
                fa-regular-400.woff
                fa-regular-400.woff2

我需要在webpack.mix.js 文件中进行哪些更改。

【问题讨论】：

标签： laravel laravel-mix

【解决方案1】：

如果你想使用 laravel-mix 并尝试将 public/fonts 更改为 public/assets/fonts 目录，您可以在 webpack.mix.js 中使用此代码

let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';

【讨论】：

不适用于当前的 Laravel-mix 版本 6.0.16。收到此错误：Cannot read property 'fileLoaderDirs' of undefined
我刚刚发现，在最新版本的 Laravel-mix (6.0) 上，将 config 替换为 options，所以它会按预期工作：mix.options.fileLoaderDirs.fonts = 'assets/fonts'
你可以这样做：mix.options({ fileLoaderDirs: { fonts: 'assets/fonts' }, });

【解决方案2】：

尝试像这样直接复制它们：

mix.copyDirectory('assets/font-awesome/webfonts', 'public/fonts');

或者你可以一个一个地复制文件：

mix.copy('assets/font-awesome/webfonts/example.ttf', 'public/fonts/example.ttf');

【讨论】：

【解决方案3】：

1.首先创建一个明确的文件夹结构：

像这样在你的 laravel 项目中。

public/fonts/vendor/font-awesome

将所有字体从font-awesome 包中移至上述目录。

2。更改 $fa-font-path 变量值：

font-awesome 目录有一个名为_variables.scss 的文件，该文件内有一个名为$fa-font-path 的变量，将值更改为类似这样。

$fa-font-path: "/fonts/vendor/font-awesome" !default;

编译你的资产，它会工作。

【讨论】：

【解决方案4】：

除了@farid-hatami 答案，您还可以附加到生成的URL 。

mix.setResourceRoot('/public')

如果您正在运行像 Django 这样的后端，您必须明确地使用您的 url，这将非常有用。

【讨论】：

【解决方案5】：

你也可以通过覆盖管理字体的 Webpack 规则来改变 Laravel Mix 生成文件夹结构的方式。

原始规则可以在 Laravel Mix 包中找到，在 src/builder/webpack-rules.js 的第 50 行，其中注释为 // Add support for loading fonts。

在您的 Mix 文件中，您可以使用 webpackConfig 方法覆盖规则，如下所示：

mix.webpackConfig({
  module: {
    rules: [{
      test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
      loaders: [{
        loader: 'file-loader',
        options: {
          name: (path) => {
            if (!/node_modules|bower_components/.test(path)) {
              return 'fonts/[name].[ext]?[hash]';
            }
            return (
              'fonts/vendor/' +
              path
              .replace(/\\/g, '/')
              .replace(
                /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
                ''
              ) +
              '?[hash]'
            );
          },
        },
      }],
    }],
  },
})

我写的规则与 Laravel Mix 包中的规则几乎相同，所以如果你需要更改它，你必须更新两个返回之一：在这种情况下是第二个，因为字体来自一个 npm 模块。

所以不是

path
  .replace(/\\/g, '/')
  .replace(
    /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
  ''
)

您可以编写硬编码字符串或更改原始路径中的内容：这样原始节点模块中的文件夹结构（在本例中为 Font Awesome）不会影响您的 @ 的文件夹结构987654325@文件夹。

【讨论】：