Laravel Mix生成Bootstrap字体URL路径错误问题求助

嘿，我之前在Laravel 5.5里用Mix编译带Bootstrap覆盖样式的Less文件时，也碰到过这个字体路径跑偏的问题！默认情况下，Bootstrap的Less会根据@import的相对路径生成font-face的URL，很容易出错，这里有几个靠谱的解决办法：

方法1：覆盖Bootstrap的Less变量（最推荐） #

Bootstrap的Less源码里定义了@icon-font-path变量来控制字体文件的路径，我们只需要在引入Bootstrap之前，在自己的_variables.less里重新定义这个变量就行：

// _variables.less 文件
// 假设你的字体最终会放在 public/fonts/bootstrap/ 目录下
@icon-font-path: "/fonts/bootstrap/";

然后在app.less里先引入自定义变量，再引入Bootstrap：

@import "_variables";
@import "~bootstrap/less/bootstrap";

这样编译后的CSS里，font-face的URL就会用你指定的绝对路径，不会跟着@import的相对路径走了。

方法2：在webpack.mix.js中直接修改Less变量 #

如果你不想修改Less文件，也可以在Mix的配置里直接覆盖Bootstrap的变量，这样更灵活：

// webpack.mix.js 文件
mix.less('resources/assets/less/app.less', 'public/css', {
    // 直接覆盖Bootstrap的Less变量
    modifyVars: {
        // 注意这里要加转义的引号，因为Less变量值是字符串
        'icon-font-path': '"/fonts/bootstrap/"'
    }
});

方法3：确保字体文件被正确复制到指定目录 #

不管用哪种方法，都要确保Bootstrap的字体文件被复制到你指定的目录里，可以用Mix的copy方法自动处理：

// webpack.mix.js 文件
// 把Bootstrap的字体文件从node_modules复制到public目录
mix.copy('node_modules/bootstrap/fonts/**', 'public/fonts/bootstrap');

最后提醒一下：要保证你设置的@icon-font-path和字体实际存放的路径完全对应，比如字体在public/fonts下，那路径就设为"/fonts/"，用绝对路径（开头加/）可以避免页面路由变化时路径出错。

内容的提问来源于stack exchange，提问作者adam78