mix.sass() stopped working after upgrade to webpack v4

[ctf0]

• Laravel Mix Version: v^4.0.8
• Node Version (node -v): v10.9.0
• NPM Version (npm -v): v6.4.1
• OS: OSX v10.11.6

Description:

mix.sass()stopped working and now in every compiled css file am getting

__webpack_require__(/*! vue */"./node_modules/vue/dist/vue.common.js");
__webpack_require__(/*! vuemit */"./node_modules/vuemit/src/Vuemit.js");
__webpack_require__(/*! vue-tippy */"./node_modules/vue-tippy/vue-tippy.js");
__webpack_require__(/*! vue-ls */"./node_modules/vue-ls/dist/vue-ls.js");
__webpack_require__(/*! vue-touch */"./node_modules/vue-touch/dist/vue-touch.js");
__webpack_require__(/*! axios */"./node_modules/axios/index.js");
__webpack_require__(/*! laravel-echo */"./node_modules/laravel-echo/dist/echo.js");
__webpack_require__(/*! socket.io-client */"./node_modules/socket.io-client/lib/index.js");
__webpack_require__(/*! fuse.js */"./node_modules/fuse.js/dist/fuse.js");
__webpack_require__(/*! keycode */"./node_modules/keycode/index.js");
__webpack_require__(/*! choices.js */"./node_modules/choices.js/public/assets/scripts/choices.min.js");
__webpack_require__(/*! vue-awesome */"./node_modules/vue-awesome/dist/vue-awesome.js");
module.exports = __webpack_require__(/*! vue-notif */"./node_modules/vue-notif/src/Notification.vue");
/* (ignored) */

Steps To Reproduce:

• webpack.mix.js

const mix = require('laravel-mix')
const res = 'resources/assets/'
const pub = 'public/assets/'

mix
    .extract([
        'vue', 'vuemit', 'vue-tippy', 'vue-ls', 'vue-touch',
        'axios', 'laravel-echo', 'socket.io-client', 'fuse.js',
        'keycode', 'choices.js', 'vue-awesome', 'vue-notif'
    ])
    .autoload({
        vue: ['Vue', 'window.Vue']
    })
    .js(res + 'js/app.js', pub + 'js')
    .sass(res + 'sass/app.scss', pub + 'css')
    .version()

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve('./resources/assets'),
            path.resolve('./node_modules')
        ]
    }
})

[JeffreyWay]

Hmm, okay. You're not the first to report this, but I've been having trouble reproducing it on my own.

What would help me most is if someone could give me exact steps to reproduce the problem.

[bjora857]

I experienced the same issue.
For me it was related to loading Vue components async.

Not working
const Wallpaper = () => import('./modules/wallpaper/Wallpaper.vue')

Works
import Wallpaper from './modules/wallpaper/Wallpaper.vue'

[ctf0]

@JeffreyWay i've also tried to remove sass and use node-sass along with the extra options prop to the mix.sass() call but it didnt work and it kept on showing error that sass is not installed.

@bjora857 that might be the issue, i've import calls all over the place, but am not sure how the dynamic-import is effecting the sass build 😢

[spaceemotion]

Getting the same issue on another project. On yet another my CSS file is completely empty instead:

            Asset      Size                             Chunks             Chunk Names
     /css/app.css   0 bytes  /js/app, /js/manifest, /js/vendor  [emitted]  /js/app, /js/manifest, /js/vendor
       /js/app.js   922 KiB                            /js/app  [emitted]  /js/app
  /js/manifest.js  8.76 KiB                       /js/manifest  [emitted]  /js/manifest
    /js/vendor.js   406 KiB                         /js/vendor  [emitted]  /js/vendor
             0.js   281 KiB                                  0  [emitted]
             1.js   182 KiB                                  1  [emitted]
             2.js  69.4 KiB                                  2  [emitted]
             3.js    18 KiB                                  3  [emitted]
             4.js  19.3 KiB                                  4  [emitted]

[JeffreyWay]

If you check the Mix 4 release notes, we mention that there are issues related to dynamic imports and CSS extraction. I'm not sure that this is something we can fix until webpack 5 comes out.

[ctf0]

@JeffreyWay yeah i saw it but why the sass build is being affected by the dynamic imports ?

[bjora857]

@ctf0
Seems to be an issue for others as well.
webpack-contrib/extract-text-webpack-plugin#762

[JeffreyWay]

If your project uses dynamic imports, I'd recommend holding off until webpack is upgraded to v5 early next year. Once they do, we can fix this issue very quickly. Until then, my hands are tied.

[tyler36]

Is there a reason behind sticking with extract-text-webpack?
Their website states

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

Pretty sure this is relates (duplicate) of #1856

[JeffreyWay]

Closing this, as there's nothing we can do until webpack 5.

[vedmant]

I have the same issue, I don't have any css in my components. I only use require.ensure once in my code to load polyfills, my css are completely separate from JS: mix.sass('resources/assets/sass/app.scss', 'public/css') and it generates empty app.css file only because require.ensure used once in the JS code.

[OksanaRomaniv]

Can confirm, removing conditional chunk import resolved the issues for mix.sass(). I've noticed that this only happens if you use conditional chunk import with mix.extract() and works properly without extraction too.

[victorybiz]

@OksanaRomaniv I have the same issue and your solution worked, but have you gotten any other fix to get it working while using mix.extract()?

[OksanaRomaniv]

@victorybiz, Unfortunately, no. Couldn't make it work together. I do think that that's a bug and should be addressed by Laravel Mix devs.

[skeeith]

Can confirm this issue still exists in Laravel Mix v5

Does anyone know a workaround on this?

I don't wanna stay on Laravel Mix v2 forever lol

Lararvel v6.12.0
Node v12.14.1
NPM v6.13.6

Packages

• "axios": "^0.19",
• "babel-plugin-syntax-dynamic-import": "^6.18.0",
• "bootstrap": "^4.4.1",
• "cross-env": "^6.0",
• "jquery": "^3.2",
• "laravel-mix": "^5.0.1",
• "lodash": "^4.17.13",
• "popper.js": "^1.12",
• "resolve-url-loader": "^2.3.1",
• "sass": "^1.20.1",
• "sass-loader": "7.*",
• "vue": "^2.5.17",
• "vue-router": "^3.0.6",
• "vue-template-compiler": "^2.6.10",
• "vuex": "^3.1.1"

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .extract([
        'vue'
    ]);

if (mix.inProduction()) {
    mix.version();
}

mix.disableNotifications();

Output

          Asset      Size                             Chunks             Chunk Names
   /css/app.css   0 bytes  /js/app, /js/manifest, /js/vendor  [emitted]  /js/app, /js/manifest, /js/vendor
     /js/app.js  3.33 MiB                            /js/app  [emitted]  /js/app
/js/manifest.js  8.94 KiB                       /js/manifest  [emitted]  /js/manifest
  /js/vendor.js   885 KiB                         /js/vendor  [emitted]  /js/vendor
           0.js  8.96 KiB                                  0  [emitted]

[murcoder]

exactly same issue here!
But it still runs on version 3.0.0.

[monmonja]

possible workaround with the sass
separate the webpack js and the sass. then on package.json add
--env.mixfile at the end any of the script, for example
"watch": "npm run development -- --watch --env.mixfile",
then on command line instead of doing npm run watch you can do
npm run watch webpack-sass.mix.js for sass
npm run watch webpack-js.mix.js for js

the js will still generate n.js though

[jnickzlim]

Have spend alot of time trying to solve this...
Only way to workaround this is by using Mix v2?

[opensourcelib]

I have the same issue with Laravel 8 and "laravel-mix": "^5.0.1"
Node v14.5.0
npm 6.14.7

I was able to compile the app.scss file by adding
mix.sass('resources/sass/app.scss', 'public/css');
and removing
.postCss('resources/css/app.css', 'public/css', [ // ])
on webpack.mix.js

at the end the file looks like that:
const mix = require('laravel-mix');
mix.sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/app.js', 'public/js');

I hope it helps!

[antsweb01]

Getting the same issue on my project. How can I fix this