Setup CSS Modules with Laravel Mix

To set up CSS Modules with Laravel Mix, you can follow these steps:

1. Install the css-loader and style-loader packages:

npm install css-loader style-loader --save-dev

1. Update your webpack.mix.js file to use the css-loader and style-loader:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
       module: {
           rules: [
               {
                   test: /\.css$/,
                   use: [
                       'style-loader',
                       {
                           loader: 'css-loader',
                           options: {
                               modules: true,
                               localIdentName: '[name]__[local]___[hash:base64:5]'
                           }
                       }
                   ]
               }
           ]
       }
   });

1. In your CSS files, you can now use CSS Modules by importing them like this:

/* app.css */
.xnmmxdps {
  /* styles here */
}

// app.js
import styles from './app.css';

const element = document.createElement('div');
element.classList.add(styles.xnmmxdps);
document.body.appendChild(element);

This will generate a unique class name for each CSS module, which will be used in your JavaScript code.