[Vuejs]-Problems removing Mix from a Laravel project with Vue

by

0👍

✅

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 css
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.((c|sa|sc)ss)$/i,
      exclude(modulePath) {
        // exclude vue css
        return 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

Leave a comment