Question

我使用Larverl 5.5和Laravel Mix 1.0。我的所有图像都存储在公共/图像中，字体是公共/字体。问题是如果我的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安装字体awesome和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”之后，它仍然指向“/images/banner.png”而不是app.css中的“../images/banner.png”

更新2： 我错了，字体的问题仍然存在，只有字体真棒得到正确的路径“../fonts”，MyFont仍然指向“/ fonts”

Answer 1

在app文件夹中打开webpack.mix.js文件，并添加以下行：

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

然后运行：npm run dev。

它将起作用。

Answer 2

我解决了： mix.setResourceRoot（'..'）;

Laravel Mix内部子文件夹中的字体和图像源

2 个答案: