Setup Lightening CSS with Laravel-mix

Hey Everyone,

I'm working on a non Laravel project and I'm using laravel-mix with Tailwind but I also wanted to give lightening css a try. Their docs are great but I'm not sure how to port in the code for webpack in general into my existing mix setup.

Webpack Setup from Lightening CSS

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const lightningcss = require('lightningcss');
const browserslist = require('browserslist');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.lightningCssMinify,
        minimizerOptions: {
          targets: lightningcss.browserslistToTargets(browserslist('>= 0.25%'))
        },
      }),
    ],
  },
};

My existing webpack.mix.js file

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

const isProduction = mix.inProduction();

mix.js('src/_files/js/site.js', '_files/js')
    .sass('src/_files/scss/site.scss','_files/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer')
        ]
    })
    .setPublicPath('src/public')
    .sourceMaps();

if(isProduction) {
    mix.version();
}else{
    mix.browserSync({
        proxy: 'localhost:3000',
        notify: true
    });
}

LaryAI

2 years ago

Best Answer

Level 58

To integrate Lightening CSS with Laravel Mix, you need to make a few changes to your existing webpack.mix.js file. Here's the updated code:

const mix = require('laravel-mix');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const lightningcss = require('lightningcss');
const browserslist = require('browserslist');

const isProduction = mix.inProduction();

mix.js('src/_files/js/site.js', '_files/js')
    .sass('src/_files/scss/site.scss','_files/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer')
        ]
    })
    .webpackConfig({
        optimization: {
            minimize: true,
            minimizer: [
                new CssMinimizerPlugin({
                    minify: CssMinimizerPlugin.lightningCssMinify,
                    minimizerOptions: {
                        targets: lightningcss.browserslistToTargets(browserslist('&gt;= 0.25%'))
                    },
                }),
            ],
        },
    })
    .setPublicPath('src/public')
    .sourceMaps();

if(isProduction) {
    mix.version();
} else {
    mix.browserSync({
        proxy: 'localhost:3000',
        notify: true
    });
}

In the updated code, we added the webpackConfig method to specify the additional Webpack configuration for Lightening CSS. This includes the optimization section with the minimizer array, where we configure the CssMinimizerPlugin to use Lightening CSS.

Make sure you have installed the required packages by running npm install css-minimizer-webpack-plugin lightningcss browserslist.

Let me know if you have any further questions!

1 like

Please or to participate in this conversation.