Jigsaw: Wrong path for fonts

[michielgerritsen]

Hello,

Currently i'm trying to include Font Awesome in my project. I have added it to npm by running:
npm i --save font-awesome

And importing it into my css:
@import '../../../node_modules/font-awesome/scss/font-awesome';

This works pretty wel, except that the generated path for the fonts is incorrect. It is missing the assets part. When i inspect the generated css, this path is generated:
/fonts/vendor/font-awesome/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713

But it should be:
/assets/fonts/vendor/font-awesome/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713

For now i solved this by using the CDN variant of Font Awesome, but for other modules this is not always possible.

[damiani]

I believe setting the $fa-font-path should accomplish this:

$fa-font-path: '/assets/fonts/vendor/font-awesome';
@import '~font-awesome/scss/font-awesome';

In my testing, this renders:

@font-face {
  font-family: 'FontAwesome';
  src: url("/assets/fonts/vendor/font-awesome/fontawesome-webfont.eot?v=4.7.0");
  src: url("/assets/fonts/vendor/font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("/assets/fonts/vendor/font-awesome/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("/assets/fonts/vendor/font-awesome/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("/assets/fonts/vendor/font-awesome/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("/assets/fonts/vendor/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

[michielgerritsen]

Yes, that works. Thanks. I found another issue which is basically the same but with images:

I have this line of css in my sass:
background: url('../../../assets/media/header.jpg');

But it is rendered as:
background: url('/images/header.jpg?d82ne');

Where the url should contain the assets path. When i put in the full path (/assets/images/header.jpg) i works though.

My expectation tells me this should work, but i'm not if this is correct Webpack/Laravel Mix behaviour as i haven't used them enough.

[raniesantos]

Had this exact same problem. I ended up having to change the public path to this mix.setPublicPath('source/'); as a temporary but quick solution.

I have my css fonts and js folders directly under source which is not ideal.

[damiani]

The best way to handle this is to tell Webpack to ignore URLs in your CSS files when it processes them, with the processCssUrls: false option. You'd set this in webpack.mix.js

mix.js('source/_assets/js/main.js', 'js')
    .sass('source/_assets/sass/main.scss', 'css/main.css')
    .options({
        processCssUrls: false,
    }).version();

This will leave your background: url('');, and any other URLs in your Sass files, untouched. You can then point them directly to wherever you're storing your images.

So, for example, if you store image files in source/assets/media, that folder will be copied to build_production/assets/media, and you would set your background to:

background: url('/assets/media/header.jpg');

The URL will not be modified when running Webpack, and it will point to the correct image.

[raniesantos]

@damiani Is it possible to make this the default mix config of a fresh jigsaw init or will that cause issues?

[damiani]

We're actually about to switch the default installation from Sass to Less, which will make this a non-issue, because Less leaves URLs alone by default. When we do, I'll add a note to the docs about Mix's processCssUrls option for people who use Sass.

[raniesantos]

Okay, I get the reasoning behind the change. I'm just wondering how many 3rd party CSS packages these days still include Less.