Problems Removing Mix From A Laravel Project With Vue

I want to remove Laravel Mix from my project in order to adopt new features or releases quicker, without having to use Mix's syntax or plugins or to put everything inside the webpa

Solution 1:

By looking at this answer to the SO question How to migrate from laravel mix to pure Webpack? I've printed out the configuration of a new Laravel Mix project with minimal set-up.

Mix.listen('configReady', function (config) {
  RegExp.prototype.toJSON = RegExp.prototype.toString;
  console.log(JSON.stringify(config));
});

I figured out that Laravel Mix uses two different sets of loaders between css files coming from Vue and all the other css/scss files.

I didn't copy their configuration because it involves lots of duplication, but luckily I was able to figure out a quick setup that does the same job:

// [...]module: {
  rules: [
    {
      test: /\.vue\.css$/, // only vue cssuse: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.((c|sa|sc)ss)$/i,
      exclude(modulePath) {
        // exclude vue cssreturn modulePath.includes('.vue');
      },
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../',
          },
        },
        'css-loader', 'postcss-loader', 'sass-loader'
      ]
    },
    // [...]
  ]
}

I'm not sure that this is the best way to load css in Vue applications, but at least now I can replicate the same situation I have in the original application.

Edit 01/28/21

When working with scss files you need to update the first test like this:

test: /\.vue\.((c|sa|sc)ss)$/i, // only vue css