Laravel-mix: Absolute path for fonts

[anishdcruz]

Hi,

right now Webpack outputs fonts inside the css folder.

updating webpack.conf.js from

{
            test: /\.(woff2?|ttf|eot|svg)$/,
            loader: 'file-loader',
            options: {
                name: '/fonts/[name].[ext]?[hash]'
            }
        }

to

name: '../fonts/[name].[ext]?[hash]'

fix the issue

Thanks

[JeffreyWay]

I'm not getting fonts in the CSS directory. Can you paste in your webpack.mix.js file?

[anishdcruz]

Sorry about the css folder.
I think file-loader rewrites the wrong path inside app.css

1. Actual app.css file

1. http request based on app.css

1. output from npm run production

1. webpack.min.js

[nmfzone]

+1 Same here. When using npm run hmr it works as expected. But, when npm run production, this error occurs.

I've solved this issue by adding publicPath (I believe the default is ./)

{
    test: /\.(woff2?|ttf|eot|svg)$/,
    loader: 'file-loader',
    options: {
        name: '/fonts/[name].[ext]?[hash]',
        publicPath: '..'
    }
}

By the way, I've some question (sorry not related to this issue). Why the images not stored in images folder? My opinion, It would be great if images could be placed in images folder (by default).

{
    test: /\.(png|jpg|gif)$/,
    loader: 'file-loader',
    options: {
        name: '/images/[name].[ext]?[hash]',
        publicPath: '..'
    }
}

@JeffreyWay

[harrynewsome]

Completely agree with @nmfzone regarding the images as all my images were broken because webpack was changing the url. Had to add publicPath: '../images/' inside webpack.config.js.

@JeffreyWay is there a way to have laravel mix prevent webpack from touching the image paths inside url()?

[eblin]

@JeffreyWay is there a way to have laravel mix prevent webpack from touching the image paths inside url()?

Yes you have to tell css-loader to disable it [1] in your config

...
            loader: extractPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: [
                    'css-loader?-url', // <-- notice the ?-url
                    'postcss-loader',
                    'resolve-url-loader',
                    (Mix.cssPreprocessor == 'sass') ? 'sass-loader?sourceMap' : 'less-loader'
...

[1] https://github.com/webpack/css-loader#options-1

[zgabievi]

+1 same problem

[nmfzone]

@JeffreyWay What's your opinion about this?

[JeffreyWay]

I've fixed the fonts public path issue.

For images, can someone create a new issue and give me the exact steps to reproduce the problem where image paths are screwed up?

[nmfzone]

@JeffreyWay No, there is no issue with images. I only give a suggestion. I only imagine that would be nice if images stored in the folder. That will be well organized.

[z1haze]

I'm not certain this is fixed. I am pulling in bootstrap to my main app.scss file, and in my _variables I am using $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; - I am getting unfavorable results though. I expect that since my app.css file is output to public/assets/css/app.css that my fonts should be output to public/assets/fonts/* but this is not happening. The fonts are being output to public/fonts, which breaks all the relative paths. Please give your input on this.

The same thing happens with the images folder, its placed in the site root, rather than relative to the app.css file. Thanks!

[z1haze]

The solution @anishdcruz provided in the first message on this issue is the fix, I had to create a my own webpack config and override the ones in the package. I think it should be by that way by default though.

[nmfzone]

@z1haze As far as I know, It isn't an issue. Because the output fonts can't automatically relative to your app.css file. If you need to have font placed in /public/assets/fonts, you must override the configuration.

[z1haze]

But why wouldn't they be relative by default? It doesn't make any sense why it shouldn't be relative

Sent from my iPhone

On Feb 26, 2017, at 12:57 PM, Nabil Muhammad Firdaus [e-mail] wrote:

@z1haze As far as I know, It isn't an issue. Because the output fonts can't automatically relative to your app.css file. If you need to have font placed in /public/assets/fonts, you must override the configuration.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[nmfzone]

@z1haze Because no one who sent the PR with such feature 😕
By the way, what you want isn't a good feature I guess. What do you think if you have public/assets/A/a.css, public/assets/B/b.css and public/assets/C/c.css, should every images/ placed in each folder? 🤔

[z1haze]

How do I just tell my configuration to put them where i want? How do I override this webpack.config.js?

[vrajroham]

Don't know this solution will work for any other user. I upgraded Laravel 5.4 from 5.3. I got exactly same issue. Tried all option suggested above. Just 1 tweak solved my issue.

I commented $icon-font-path in _variable.scss in this file .

comment following line in _variables.scss

//Comment following line
//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

NOTE : I upgraded to 5.4 from 5.3

Hope it helps

[fudgelabs]

I had the same problem in that it was looking for fonts at:
/public/css/fonts/..etc

Compiled /public/css/app.css had font urls as:
url(/fonts/...etc);

Anyway, I had to edit line 204 for /node-modules/laravel-mix/setup/webpack.config.js from:
publicPath: Mix.options.resourceRoot
To:
publicPath: '../'

...and now it is working.

And /public/css/app.css now has the fonts at:
url(../fonts/...etc.);

Windows 7, 32bit and this was all on a fresh install of Laravel.

[bankgt]

@fudgelabs You can use this function for set a path.
mix.setPublicPath('themes/ilp/assets/dist');
mix.setResourceRoot('/themes/ilp/assets/dist/');

[tedsecretsource]

I'm trying to add theming to a project. I've added themes/{theme-name}/sass to ~/resources and things mostly work. The only issue is I too am seeing fonts always being copied to the public root. The only way to get them into the theme folder is by copying them manually and using a site-relative URL (aka absolute URL) since those URLs are ignored, but this seems broken. I would expect document relative URLs to resolve the location and copy accordingly. What am I missing?

Thanks.

[Kristories]

let mix = require('laravel-mix');

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