laravel-mix: Laravel Mix doesn't output css files

Description:

Hi, I’ve cloned the code at master branch on rappasof/laravel-5-boilerplate and was able to run npm install followed by npm run dev. It does process the scss files, as it generates the font files, but the css files are not been generated.

I’m running on:

Laravel Mix Version: 0.12.1
Node Version: 8.1.0
NPM Version: 5.0.3
OS: Windows 10 x64

This is the output from npm run dev:

PS D:\DevProjects\laravel-5-boilerplate.lar> npm run dev

> @ dev D:\DevProjects\laravel-5-boilerplate.lar
> npm run development


> @ development D:\DevProjects\laravel-5-boilerplate.lar
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 DONE  Compiled successfully in 3399ms                                                                                                                              02:02:31


                                                                                                    Asset       Size  Chunks                    Chunk Names
                       fonts/vendor/font-awesome/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9     166 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1    20.1 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512    45.4 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158    23.4 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb      18 kB          [emitted]
                       fonts/vendor/font-awesome/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713     166 kB          [emitted]
                       fonts/vendor/font-awesome/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde     444 kB          [emitted]  [big]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760     109 kB          [emitted]
                     fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e    77.2 kB          [emitted]
                      fonts/vendor/font-awesome/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad      98 kB          [emitted]
                                                                                          /js/frontend.js    1.21 MB       0  [emitted]  [big]  /js/frontend
                                                                                           /js/backend.js     980 kB       1  [emitted]  [big]  /js/backend
                                                                                                   mix.js     619 kB       2  [emitted]  [big]  mix
                                                                                        mix-manifest.json  256 bytes          [emitted]

No css files emitted!

I’m using laravel on top of apache, so I’m getting an error on the assets urls because they are absolute from root, as http://localhost:8000/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e and what I need is http://localhost:8000/my-project/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e.

After some digging, I’ve found that if I add mix.setResourceRoot('/my-project/'); in the webpack.mix.js file, I could generate the links to assets correctly, but I can’t get Laravel Mix to output the corrected css files.

How do I fix this?

Steps To Reproduce:

git clone https://github.com/rappasoft/laravel-5-boilerplate.git
npm install
npm run dev

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 19 (8 by maintainers)

Most upvoted comments

Move js() above sass()

ruchernchong on Jun 19, 2017

This is all fixed in the 1.0 Mix release.

JeffreyWay on Jun 19, 2017

just what I needed

jardila on Jun 16, 2017

Hey all, If you’re still having this issue, be sure to add .setPublicPath(‘dist’) into the… ahem… mix. Like so

mix
    .js('app/app.js', 'dist/js/')
    .sass('app/sass/app.scss', 'dist/css/')
    .setPublicPath('dist');

Your paths will likely be different. Also, Jeff’s NPM scripts look like so:

"scripts": {
    "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }

On Window this won’t work natively so you’ll want to install cross-env and then you can run them like so

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

Hope this helps!

filljoyner on Jun 27, 2017

@leopuglia Anytime soon?

ruchernchong on Jun 19, 2017