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

[LRstudentHU]

• 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?

[randompixel]

I think I'm getting the same issue using mix.sass. Removing the mix.extract() statement seems to make the CSS appear again.

I've switched the statements to use
mix.sass('resources/sass/app.scss', 'public/css', { implementation: require('node-sass') });

but the extract just seems to mess with them.

[LRstudentHU]

You're right, if I remove .extract() the css is alright again.

[JeffreyWay]

Do your projects use JS dynamic important?

[quepaso]

Do your projects use JS dynamic important?

hey,
i'm not using tailwindcss but having the same issue with mix.sass producing empty css files after upgrading to lm 4 today.

and it seems to be clearly related to dynamic importing. when i import my vue single file components the normal non-dynamic way, the css files are fine.

but when trying to use the dynamic method via components: { mycomponent: () => import('mycomponent.vue') } the css output is empty.

[JeffreyWay]

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

[angelformica]

Hello @JeffreyWay, thank you! My project uses dynamic imports, is there a workaround on this issue meanwhile?

[JeffreyWay]

Stick with v2 of Mix

[angelformica]

Ok, Thank you!

[VinceG]

@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.

[angelformica]

Excellent, Thank you very much. I will try that. What i've been doing so
far is to comment the mix.extract, I can't separate vendors assets this way
and my output file is too big, but at least it works. But now I will try
your solution.

Thanks again!

On Mon, Jan 7, 2019 at 2:17 PM Vincent Gabriel [e-mail]
wrote:

@angelformica https://github.com/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.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JeffreyWay/laravel-mix/issues/1887#issuecomment-452048736,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMZv2pKWsIbOylkfkycK4iMFTv7uaWdYks5vA50wgaJpZM4Zd_vN
.

[elliottregan]

@VinceG How do I configure Laravel to use more than one webpack.mix.js file?

[VinceG]

@elliottregan as an example:

"dashboard:dev": "npm run dashboard:js:dev && npm run dashboard:css:dev",
"dashboard:watch": "npm run dashboard:js:watch && npm run dashboard:css:watch",
"dashboard:hot": "npm run dashboard:js:hot && npm run dashboard:css:hot",
"dashboard:production": "npm run dashboard:js:production && npm run dashboard:css:production",
"dashboard:js:dev": "npm run dev -- --env.mixfile=modules/Dashboard/webpack.mix",
"dashboard:js:watch": "npm run watch -- --env.mixfile=modules/Dashboard/webpack.mix",
"dashboard:js:hot": "npm run hot -- --env.mixfile=modules/Dashboard/webpack.mix",
"dashboard:js:production": "npm run production -- --env.mixfile=modules/Dashboard/webpack.mix",
"dashboard:css:dev": "npm run dev -- --env.mixfile=modules/Dashboard/webpack.css.mix",
"dashboard:css:watch": "npm run watch -- --env.mixfile=modules/Dashboard/webpack.css.mix",
"dashboard:css:hot": "npm run hot -- --env.mixfile=modules/Dashboard/webpack.css.mix",
"dashboard:css:production": "npm run production -- --env.mixfile=modules/Dashboard/webpack.css.mix",

[elliottregan]

@VinceG Thanks! I didn't know about the --env.mixfile flag.

I solved it a slightly different way, where I set a custom env variable, and checked the value of that variable in the default webpack.mix.js file. Basically,

// webpack.mix.js
require(`webpack.${env.mixFile}.mix.js`)

[escael]

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

[rhaglennydd]

I've tried the two mixfiles solution, but I'm having a problem with my Sass-only mixfile: it results in not only a CSS file but also a mix.js file that I don't want. (I'm not loading CSS through JS.) Here are the contents of the mixfile:

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

// Public path helper
const publicPath = path => `${mix.config.publicPath}/${path}`;

// Source path helper
const src = path => `resources/assets/${path}`;

// Public Path
mix
    .setPublicPath( './dist' )
    .setResourceRoot( `/wp-content/themes/magnetar/${mix.config.publicPath}/` )
    .webpackConfig( {
        output : { publicPath : mix.config.resourceRoot },
    } );

// Browsersync
mix.browserSync( 'magnetar.localhost' );

// Styles
mix.sass( src`styles/app.scss`, 'styles' );

// Assets
mix.copyDirectory( src`images`, publicPath`images` )
    .copyDirectory( src`fonts`, publicPath`fonts` );

// Source maps when not in production.
mix.sourceMaps( false, 'source-map' );

// Hash and version files in production.
mix.versionHash( { length : 16 } );

As you might be able to tell, I'm using the plugin laravel-mix-versionhash (https://github.com/ctf0/laravel-mix-versionhash) to hash my filenames, so the unwanted file is actually named something like mix.e628f856257e094e.js (and then there's the equivalent sourcemap when in development mode). I just want these file(s) not to be generated in the first place, but if I have to settle with removing them post-compilation I'm open to a solution for that as well. Apologies that NodeJS and Webpack aren't my forte.

[benjamin-ndc]

I'm having an issue with this now where there the output is empty. I have my webpack.mix files separated, one just for css.

My goal is to make this super simple: scss file that imports Vuetify's styles, applies variable changes, and outputs a single css file.

laravel-mix: ^5.0.1
vuetify: 2.2.1
sass: 1.24.2
sass-loader: 8.0.0

// resources/assets/sass/main.scss
@import '~vuetify/src/styles/styles.sass';
$data-table-regular-row-height: 24px;

// webpack.css.mix.js
const mix = require('laravel-mix');
mix.sass('resources/assets/sass/main.scss', 'public/css/dist');
if (mix.inProduction()) mix.version();

// Output
/css/dist/main.css  0 bytes     mix  [emitted]  mix

So I'm not calling .extract(), and yet this issue is happening. Any pointers?