Question

我正在使用构建在laravel-mix顶部的webpack。我遇到了fonts目录的问题。例如，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

1：首先创建一个显式的文件夹结构：

在你的laravel项目中这样。

{ "presets": [['es2015', {modules: false}], 'react', 'stage-0'], "plugins": [ ["react-hot-loader/babel"], ["transform-runtime"], ["transform-decorators-legacy"], ["transform-async-to-generator"], ["babel-plugin-root-import", {"rootPathSuffix": "src/client" }], ] }

将所有字体从public/fonts/vendor/font-awesome包移至上述目录。

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

font-awesome目录在该文件中有一个名为font-awesome的文件，有一个名为_variables.scss的变量将值更改为此类值。

$fa-font-path

编译它可以运作的资产。

Answer 2

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

中使用此代码

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

Answer 3

尝试直接复制它们：

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

或者您可以逐个复制文件：

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

Answer 4

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

mix.setResourceRoot('/public')

如果您运行的是Django之类的后端，而您必须在其中明确显示网址，则此功能非常有用。

Answer 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）将不会影响{ {1}}文件夹。

Laravel Mix将字体生成到另一个目录中

5 个答案: