laravel-mix: Generated css file is empty with scss and tailwindcss

Laravel Mix Version: 4.0.12
Node Version: 11.5.0
NPM Version: 6.4.1
OS: Ubuntu 18.10

Description:

The app.css file generated by Laravel Mix is empty after upgrading to LM 4.

Steps To Reproduce:

Occurred after upgrading to LM 4. The generated css file is completely empty using the following configuration:

let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');

mix.ts('resources/ts/app.ts', 'public')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind.js')]
    })
    .extract()
    .disableNotifications()
    .browserSync({
        proxy: 'customer.local',
        notify: false
    });

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

mix.webpackConfig({
    output: {
        publicPath: '/',
        chunkFilename: 'js/[name].js'
    }
});

Please note that scss is used with tailwindcss. There are no errors or logs available.

Ideas?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 16 (2 by maintainers)

Commits related to this issue

remove vendor splitting causes missing css when dynamic imports are used - https://github.com/JeffreyWay/laravel-mix/issues/1887 — committed to ben-rogerson/agency-webpack-mix-config by ben-rogerson 5 years ago

Most upvoted comments

Hi, I had the same problem, which I solved by adding the path of the scss file

mix.webpackConfig({
    entry: {
        main: ['./resources/assets/src/scss/main.scss']
    },
    output: {
        filename: '[name].js',
        chunkFilename: 'dist/js/[name].[contenthash].js'
    }
});

Thanks

+47

escael on Jul 8, 2019

The Mix 4 release notes mention that there are unavoidable issues related to dynamic imports that we can’t fix until webpack 5 is out.

https://github.com/JeffreyWay/laravel-mix/releases/tag/v4.0.0

JeffreyWay on Dec 21, 2018

@angelformica To overcome this i just have two mix files, one does the scss one does the js. that way i can use dynamic imports and the css compiles just fine.

VinceG on Jan 7, 2019