Output path issue with mix.sass()

Hi,

I started using this a few days ago on a Node project, works perfectly fine with Vue!

But today I wanted to work a bit on styling and I do encounter an issue with the .sass() method.

Here’s my config used in webpack.mix.js:

mix.js('resources/js/app.js', 'public/app.js')
    .sass('resources/sass/app.scss', 'public/app.css')

And here’s the output of the terminal when running npm run dev or npm run webpack:

Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB     [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB     [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB     [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB     [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB     [emitted]
                                                            public/app.js   344 kB  0  [emitted]  app
                                                                 /app.css   688 kB  0  [emitted]  app

As you can see, the JS output is fine, it’s where it should be, but the CSS file is put at the root folder of my project.

I’m using bootstrap-sass, so it looks that it is automatically moving the fonts, but again they should go into the public folder, but I don’t really know how I can configure that.

My app.scss file is currently importing bootstrap-sass, and there’s a single class in it:

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

.top-spacing {
    margin-top: 10px;
}

It seems that the specified output path is truncated, because I gave it a try by using public/public/app.css, and it actually works!

Just in case, here’s my directory structure:

- node_modules
- public
- resources
    - js
        app.js
    - sass
        app.scss
webpack.config.js
webpack.mix.js

Thanks in forward for your help, I’m also looking into the code to see what could be the issue, but no success so far!

[JeffreyWay]

For Node apps, you’ll have to tell Mix where your public directory is. Add this, and it should work:

mix.js('resources/js/app.js', 'public/')
   .sass('resources/sass/app.scss', 'public/')
   .setPublicPath('public');

[monorigabor]

Awesome, works perfectly! Thanks for your very quick reaction!