Question

我使用Laravel 5.5并使用mix自动生成public文件夹和yarn中的文件以进行包管理。如果字体由位于包文件夹（node_modules/package_name/module.scss）中的SASS文件引用，并且该文件由mix.sass()处理，则这些字体将自动放入public/fonts/vendor/package_name文件夹和生成的CSS中的URL中文件被新的字体文件位置路径替换。

现在，我想只复制包中定义的一些字体，而包.scss文件加载所有这些字体。为此，我没有使用node_modules/package_name/module.scss创建自定义文件（_fonts.scss），而是将其引用为主SASS文件：

@font-face {
  font-family: 'Font-Name';
  font-style: normal;
  font-weight: 400;
  src: url('node_modules/package_name/fonts/font-name.ttf') format('truetype');
}

我是否可以将Webpack配置为将生成的.css中的URL替换为public/fonts/vendor/package_name/font-name.ttf并将字体文件复制到该位置？

我可以将最终的URL写入源_fonts.css并调用mix.copy()来手动复制字体，但我觉得这是错误的方法。

另外，有没有一种很好的方法可以将这些字体复制到自定义文件夹public/fonts/custom？

Answer 1

在检查了mix webpack-rules.js文件后，我决定默认情况下所描述的功能无需任何其他工作：

rules.push({
    test: /\.(woff2?|ttf|eot|svg|otf)$/,
    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]';
        },
        publicPath: Config.resourceRoot
    }
});

然后，在阅读关于加载字体的好article时，我发现.scss 中的路径必须是相对的。所以我改变了

的字体路径

node_modules/package_name/fonts

到

./../../../../../node_modules/package_name/fonts

现在可行。

使用Laravel mix（Webpack）将CSS中引用的特定字体复制到目标文件夹

1 个答案: