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

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')
        ]
    }
})

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20

Most upvoted comments

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]

+12

skeeith on Jan 27, 2020

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.

JeffreyWay on Dec 17, 2018

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

jnickzlim on Apr 26, 2020

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

monmonja on Feb 6, 2020

@ctf0 Seems to be an issue for others as well. https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/762

bjora857 on Dec 17, 2018