node -v): 6.10.3npm -v): 3.10.10For my project, I would like Laravel Mix to compile my Sass into two files, a regular, un-minified (expanded or nested) .css-file, and a minified (compressed) .min.css-file, so I essentially have both files.
However, when I run npm run dev or any of the scripts, I get an error:
Copying css/app.css to css/app.min.css
fs.js:1000
binding.stat(pathModule._makeLong(path), statValues);
^
Error: ENOENT: no such file or directory, stat 'css/app.css'
at Error (native)
at Object.fs.statSync (fs.js:1000:11)
at Object.statSync (/home/moso/Code/project/node_modules/graceful-fs/polyfills.js:297:22)
at Object.copySync (/home/moso/Code/project/node_modules/fs-extra/lib/copy-sync/copy-sync.js:31:86)
at FileCollection.copyTo (/home/moso/Code/project/node_modules/laravel-mix/src/FileCollection.js:41:12)
at CopyWebpackPlugin.copy.forEach.copy (/home/moso/Code/project/node_modules/laravel-mix/src/WebpackPlugins/CopyWebpackPlugin.js:10:57)
at Array.forEach (native)
at new CopyWebpackPlugin (/home/moso/Code/project/node_modules/laravel-mix/src/WebpackPlugins/CopyWebpackPlugin.js:9:10)
at Object.<anonymous> (/home/moso/Code/project/webpack.config.js:399:5)
at Module._compile (module.js:570:32)
I have tried with:
mix.setPublicPath('./dist');
mix.sass('src/app.css', 'css/', {
outputStyle: 'nested' })
.copy('css/app.css', 'css/app.min.css')
.minify('css/app.min.css');
I have also tried separating the two with:
mix.sass('src/app.scss', 'css/', {
outputStyle: 'nested' });
mix.copy('css/app.css', 'css/app.min.css')
.minify('css/app.min.css');
I have even tried with absolute paths.
If I out-comment the .copy()-part, the script compiles successfully. It also throws an error, even if the file exists from a previous compile where .copy() was commented out.
If there's a smarter way to accomplish what I'd like to do, then by all means do tell.
@moso This is due to the fact that complilation and the copy command happens at the same time. Not one after the other.
I think you can use mix.then(() => { do copy stuff here }); So this is not a bug, but the way webpack works.
@morloderex Thanks for pointing out how mix.then works, I couldn't figure out you could just use regular npm packages in it.
I pulled in another npm package that minifies for me, and I'm now only running npm run dev.
Most helpful comment
@moso This is due to the fact that complilation and the copy command happens at the same time. Not one after the other.
I think you can use
mix.then(() => { do copy stuff here });So this is not a bug, but the way webpack works.