提问者:小点点

字体和图像源与Laravel混合在子文件夹内


im使用Larverl 5.5和Laravel Mix 1.0。我的所有图像都存储在public/images中,字体存储在public/fonts中。问题是如果我的Laravel项目是在像htdocs/demo/Laravel这样的子文件夹中,那么所有的图像和字体url都无法在scss文件中找到。例如:

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(字体/组件文件夹内)

@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");
}

我也安装了字体awesome和boostrap由npm和遭受同样的问题与字体。

这是我的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:我错了,字体的问题仍然存在,只有font awesome得到了正确的路径“../fonts”,而MyFont仍然指向“/fonts”


共1个答案

匿名用户

打开app文件夹中的webpack.mix.js文件并添加以下行:

mix.setPublicPath('public');
mix.setResourceRoot('../');

然后运行:npm run dev

会管用的。