Laravel-mix: resolve path relative to public folder

[dev-seahouse]

I have mix copied semantic-sass assets from node_modules to public folder :

// /webpack.mix.js
mix.copy('node_modules/semantic-ui-sass/app/assets/images/', 'public/images/', false)
  .copy('node_modules/semantic-ui-sass/app/assets/fonts/', 'public/fonts/', false)
  .js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')

This is how it looks like after copying:
source :

/node_modules
 |+semantic-ui-sass
     |+app
        |+assets
            |+fonts
               |+semantic-ui
                  |-icons.eof
                  |-icons.otf
                     ......
           |+stylesheets
               |+semantic-ui
                  |+elements
                      |_icon.scss 
                 .......

dest:

/public
 |+css
     |-app.css
 |+fonts
     |-semantic-ui
     |-icons.eot
     |-icons.otf
     |-icons.svg
     |-icons.ttf
     |-icons.woff
     |-icons.woff2

Then imported icons inside /resource/assets/sass/app.scss

// resources/assets/sass/app.scss
@import 'node_modules/semantic-ui-sass/app/assets/stylesheets/semantic-ui/elements/icon';

After running npm run dev, this is the result produced :
source:

  src: font-url("semantic-ui/icons.eot");
  src: font-url("semantic-ui/icons.eot?#iefix") format('embedded-opentype')
    ...

dest:

/* public/css/app.css */
@font-face {
  src: font-url("./../../../node_modules/semantic-ui-sass/app/assets/fonts/semantic-ui/icons.eot");
  font-url("./../../../node_modules/semantic-ui-sass/app/assets/fonts/semantic-ui/icons.eot") format("embedded-opentype");
  .....
}

But this is want i want :

/* public/css/app.css */
@font-face {
  src: font-url("fonts/semantic-ui/icons.eot");
  src: font-url("fonts/semantic-ui/icons.eot");
  .....
}

I was wondering is there some way to configure mix to resolve urls inside scss relative to production public folder instead of dependencies source folder without changing the source?

[swt83]

I have this problem too. I can't load FontAwesome via SCSS because webpack insists on absolute URLs instead of relative ones.

This works, but loads the URLs as a file looking at localhost/fonts instead of my public directory:

$fa-font-path: "/../fonts/";
@import "node_modules/font-awesome/scss/font-awesome";

This is what I need, but won't work because it's a relative directory:

$fa-font-path: "../fonts";
@import "node_modules/font-awesome/scss/font-awesome";

[swt83]

Aha!

Add this to your webpack.mix.js file:

.options({ processCssUrls: false })

As referenced here.

[httpoz]

Dankie @swt83

[jhourlad]

How about relative asset path? e.g. background-image: url(../img/image.png)?
Also doesn't properly resolve.

[leoquijano]

I'm having a similar issue.

I'm not sure processCssUrls will help people that have non-standard directory layouts (such as in a shared hosting), or hosted in subdirectoreis.

Since fonts are already in the public/ directory, shouldn't paths be relative anyway?

[M-Hoogie]

Here's what I did for relative asset paths:

webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve('src')
        }
    }
}).options({
    extractVueStyles: true
}).js('src/main.js', 'dist/').sass('src/assets/scss/app.scss', 'dist');

fonts.scss

@font-face {
  font-family: 'font';
  src: url('~@/assets/fonts/font-webfont.woff2') format('woff2'),
  url('~@/assets/fonts/font-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

App.vue

  ....
<style lang="scss">

    @import 'assets/scss/module/fonts';
....

Offcourse these aren't node-modules but they are a use case that can be applied to this issue.

[jhourlad]

@Mark-Hoog Great work. Though this works, it is still a "hacky" way to do it. Would be great if the issue could be addressed on the package itself.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.