Laravel-mix: multiple .js + .sass produces empty css

[juandelperal]

• Laravel Mix Version: 4.0.15
• Node Version: v10.4.1
• NPM Version: 6.9.0
• OS: OSX 10.12 Sierra

Description:

When trying to complile 2 different .js and a .sass, it produces an empty css for some random reason.
When I use 1 .js all is perfect. Any clue with this? or how to solve it?
Images of the results:
1 .js we are all happy

2 .js nonsense

Thanks

Steps To Reproduce:

webpack.mix

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

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': __dirname + '/resources/js'
        },
    },
})

mix
    .sass('resources/sass/app.scss', 'public/css')
    .js( 'resources/js/spa.js', 'public/js')
    .js( 'resources/js/app.js', 'public/js')
    .version()

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": "npm run development -- --watch",
        "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@handsontable/vue": "^3.1.0",
        "animate.css": "^3.7.0",
        "apexcharts": "^3.5.0",
        "axios": "^0.18",
        "browser-sync": "^2.24.6",
        "browser-sync-webpack-plugin": "^2.2.2",
        "cross-env": "^5.1",
        "cssnano": "^4.1.10",
        "flickity": "^2.2.0",
        "handsontable": "^6.2.2",
        "highlight.js": "^9.13.1",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.4",
        "moment": "^2.24.0",
        "parser": "^0.1.4",
        "postcss-sass": "^0.3.5",
        "postcss-unprefix": "^2.1.4",
        "require-vuejs": "^1.1.3",
        "sass": "^1.17.3",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.22",
        "vue-apexcharts": "^1.2.9",
        "vue-click-outside": "^1.0.7",
        "vue-gtm": "^2.0.0",
        "vue-in-viewport-directive": "^1.1.4",
        "vue-router": "^3.0.2",
        "vue-template-compiler": "^2.5.22",
        "vue2-dropzone": "^3.5.2",
        "vuex": "^3.1.0"
    },
    "devDependencies": {
        "resolve-url-loader": "2.3.1"
    }
}

[Fuhrmann]

I'm not sure, but I guess this is related to: #1856

[juandelperal]

Thanks @Fuhrmann !
Adding this code from @Ewan-Walker in the config now produces code in css running npm run dev

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': __dirname + '/resources/js'
        },
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                vendors: {
                    chunks: 'initial',
                    name: 'vendor',
                    filename: 'js/[name].js'
                }
            }
        },
    },
})

BUT, when I hit npm run production it fails:
CssSyntaxError: /css/app.css:3:19: Missed semicolon

there in the css I found this:

……
.hoverable {
    opacity: 1;
    visibility: visible;
    display: block
}
var map= {
    "./af": "./node_modules/handsontable/node_modules/moment/locale/af.js",
        "./af.js": "./node_modules/handsontable/node_modules/moment/locale/af.js",
        "./ar": "./node_modules/handsontable/node_modules/moment/locale/ar.js",
……

[juandelperal]

I discovered that after downgrading to 3.*, all works perfect.
Thanks

[vakareunas]

Downgrading laravel mix is a hectic job use native sass cammand
go to sass directory open cmd
type: sass -watch yourSassFile:OutPutDestination (if you want to ouput public/css, type ../../public/css/app.css)

[AndersonZacharyT]

Why does this happen? I don't want to downgrade :(

[DuckThom]

I found that when the css files have multiple chunks, which seems to happen when I have more than 1 import() statement across my JS files, they get empty.

                         Asset      Size  Chunks                    Chunk Names
     /assets/admin/css/app.css   0 bytes    1, 3  [emitted]         /assets/admin/js/vendors, /assets/frontend/js/vendors
... js files...
  /assets/frontend/css/app.css   0 bytes    1, 3  [emitted]         /assets/admin/js/vendors, /assets/frontend/js/vendors       

This is the case in both v4 and v5

[dithidi]

@DuckThom Were you able to find any other information on this? We are running into the same problem.

[DuckThom]

@brentli1 No, unfortunately I haven't. I did find something neat which I didn't know was possible before, in my frontend JS file I added the following line:

import(/* webpackChunkName: 'frontend-css' */ './sass/app.scss');

And I removed the .sass() line from my webpack.mix.js file. Now I don't have any issues with the css anymore. I am currently looking if I can split the files up more as there is a very brief (couple of ms) flash of unstyled content now. But of course, this is not a solution that will work for everyone.

[Taelkir]

Getting the same problem here, seemingly introduced after adding another dynamic import to a JS file. Is it worth reopening this issue, or starting another?

[robest-infotech]

This is help me. https://github.com/JeffreyWay/laravel-mix/issues/1887#issuecomment-509217601

[3rd]

Why are all the issues related to this getting closed, if the issue is not fixed?

[iLLia12]

I still have the issue
double ".js" like mix.js(...).js(...).sass(...); produces an empty css file

mix.js('resources/js/admin/app.js', 'public/js/mix/admin.js')
    .js('resources/js/user/app.js', 'public/js/mix/user.js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/user.scss', 'public/css');

but with one ".js" like mix.js(...).sass(...); is working

and the only solution for me is to split the building

if (process.env.npm_config_section === 'admin') { 
   mix.js('resources/js/admin/app.js', 'public/js/mix/admin.js')
        .sass('resources/sass/app.scss', 'public/css')
        .mergeManifest();
 } else if (process.env.npm_config_section === 'user') { 
   mix.js('resources/js/user/app.js', 'public/js/mix/user.js')
        .sass('resources/sass/user.scss', 'public/css')
       .mergeManifest();
}

and in my package.json

        "watch-user": "npm --section=user run development -- --watch",
        "watch-admin": "npm --section=admin run development -- --watch",