Laravel 混合生成字体到另一个目录

Question

我正在使用构建在 webpack 之上的 laravel-mix。我遇到了字体目录的问题。例如，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 文件中更改哪些内容。

Answer 1

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

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

或者你可以一个一个复制文件:

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

Answer 2

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;

编译你的资产它会工作。

Answer 3

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

中使用此代码

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

Answer 4

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

mix.setResourceRoot('/public')

如果您是像 Django 这样的运行后端，您必须在 url.

中明确说明，这很有用

Answer 5

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

原始规则可以在 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 包中的规则相同，所以如果你需要更改它，你将不得不更新两个 returns 之一：在这个第二种情况，因为字体来自 npm 模块。

所以不用

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

你可以写一个 hard-coded 字符串或者改变你想要的原始路径：这样原始节点模块中的文件夹结构（在本例中为 Font Awesome）不会影响文件夹public 文件夹的结构。

Answer 6

混合选项已更改。改用：

mix.options({
    fileLoaderDirs:  {
        fonts: 'assets/fonts'
    }
});

Laravel 混合生成字体到另一个目录

Laravel Mix generate fonts into another directory

laravel

laravel-mix