带有Laravel Mix的字体和图像源位于子文件夹中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有Laravel Mix的字体和图像源位于子文件夹中相关的知识,希望对你有一定的参考价值。

即使用Larverl 5.5和Laravel Mix 1.0。我所有的图像都存储在public /图像中,字体存储在public /字体中。问题是如果我的Laravel项目位于htdocs / demo / laravel之类的子文件夹中,则无法在scss文件中找到所有图像和字体url。例如:

app.scss

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

// Font
@import "components/fonts";

// Font Awesome
@import "~font-awesome/scss/font-awesome.scss";

wrapper {
  .banner {
    background: url('/images/banner.png') no-repeat;
    background-size: cover;
    }
}

fonts.scss(内部fonts / components文件夹)

@font-face {
  font-family: MyFont;
  font-weight: normal;
  font-style: normal;
  src: url("/fonts/MyFont.eot");
  src: url("/fonts/MyFont.ttf") format("truetype"),
       url("/fonts/MyFont.woff") format("woff");
}

我还通过npm安装了真棒字体和boostrap字体,并且遇到了同样的字体问题。

这是我的webpack.mix.js

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

更新1:字体问题通过将其添加到webpack.mix.js中来解决:

mix.setPublicPath('public/');
mix.setResourceRoot('../');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

现在问题仍然是scss文件上的背景图像。运行“ npm run dev”后,它仍然指向app.css中的“ /images/banner.png”而不是“ ../ images / banner.png”。

更新2:我错了,字体问题仍然存在,只有字体很棒才有正确的路径“ ../fonts”,MyFont仍然指向“ / fonts”

答案

我解决了:mix.setResourceRoot('..');

以上是关于带有Laravel Mix的字体和图像源位于子文件夹中的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 为 Bootstrap 字体混合不正确的 URL

带有 laravel-mix 的 vue-loader 15

Laravel Blade、Mix 和 SASS 资源版本共享

Laravel:布局中的脚本和图像源在带有前缀的url中不起作用

带有 Laravel Mix 的 VUE 中的 JQuery 插件

Laravel mix 在 vue 组件中看不到 img 元素