Not creating css file on Mac

[silverbackdan]

I'm trying to use webpack to compile assets. It is working well with copying images and compiling javascript. It also appears to compile the scss but the final file is not created. This script works: sass --watch resources/assets/sass/app.scss:public/css/app.css --load-path ./

However webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch --progress does not create the css file (with or without the watch flag). Other bootstrap assets (fonts) are copied which are imports in the scss file, and if I change a variable so it doesn't exist, compiling fails. Output:

 DONE  Compiled successfully in 4048ms                                                                                                                                                                                                           11:21:08

                                                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]         
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 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]         
                                                                                               /js/app.js   1.36 MB       0  [emitted]  [big]  /js/app
                                                                                        mix-manifest.json  90 bytes          [emitted]         

Additionally, and I'm not sure if it's connected or I should raise another issue, watching files does not appear to work on my machine (Mac) or a Mac laptop I have.

I've tried Node LTS and v8.0.0, I've tried removing Node/NPM entirely and reinstalling as well.

Node: v8.0.0
NPM: 5.0.3
Webpack: 2.6.1

During webpack install I get this:

node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v57-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for fsevents@1.1.1 and node@8.0.0 (node-v57 ABI) (falling back to source compile with node-gyp)

But it seems to fallback OK for fsevents (perhaps relating to the watch command).

My package.json:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "css-loader": "^0.28.4",
    "gulp": "^3.9.1",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.5",
    "vue": "^2.1.10",
    "webpack": "^2.6.1"
  }
}

Another developer was using the config without issues and compiling so I'm really lost as to what is broken in my setup. Any ideas?

Thank you in advance.

[silverbackdan]

Additionally, I've just looked in sass-loader and can confirm that the scss is being compiled to a css string, the string is being returned to the async callback, but I'm not sure where that is to continue trying to figuring it out any further.

[alexander-akait]

@silverbackdan please provide more detailed webpack configuration

[silverbackdan]

@evilebottnawi I'm sorry for taking your time. I've created a stripped back config instead of using a Laravel install. The config works and creates a file. There is an issue that files are not watched still but I can raise an issue on the main webpack repo for that as they don't appear to be linked. (Although I'm just struggling through with this at the moment trying to work it out).

[alexander-akait]

@silverbackdan feel free to reopen if issue will be related to sass-loader

[silverbackdan]

@evilebottnawi thank you, it appears it's related to this bug with webpack watch commands: webpack/webpack#4250 but I've left this closed as I'm not sure if the root cause of the problem will be in the main webpack code or this loader.