How to add autoprefixer for LESS inside .vue files in webpack.config?

Question

JavaScript

Good afternoon colleagues.
I have several vue components inside which I use LESS to set rules for styles. I have a webpack.config for a project build.
While working on the vue-loader, I pass the code inside the LESS file through three more loaders: vue-style-loader!css-loader!less-loader.
The code

{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    'less': 'vue-style-loader!css-loader!less-loader'
                }
            }
        }

QUESTION: How to add an Autoprefixer for LESS at the stage of resolving .vue components?

Answer 1

Like this
1. npm i --save-dev postcss-loader
2. Create a config file - postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'cssnano': {}
  }
}

3. Adding a line from webpack.cinfig.js

'less': 'vue-style-loader!css-loader!postcss-loader!less-loader'

Answer 2

Now I’m being bombarded with pissing rags, but:
If you don’t use scoped styles (and there will be no reason to use them if you add short (1-3 letters) “package” prefixes to component names and observe bam), then I recommend refusing to place styles through style tag inside the component, and pull up styles via require or import at the beginning of the script tag.
The main reason is the strange connection order. Especially delivers hemorrhoids when some of the styles are already connected via require or import.
Yes, and setting up loaders for sass/less is easier this way.

Answer 3

Use laravel mix. There is a convenient API.