resolve path relative to public folder

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]

Aha!

Add this to your webpack.mix.js file:

.options({ processCssUrls: false })

As referenced here.

[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.