postcss-less-loader v0.1.0-alpha.2

npm i -D postcss-less-loader

Configuration

postcss.config.js

module.exports = {
  plugins: [
      require('autoprefixer')
  ]
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ca]ss$/,
        use: [ 'style-loader', 'css-loader', 'postcss-less-loader' ]
      }
    ]
  }
}

webpack.config.js (recommended)

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { alias: { "@test": "/home/test"} } },
          'postcss-less-loader'
        ]
      }
    ]
  }
}

Plugins

webpack.config.js

{
  loader: 'postcss-less-loader',
  options: {
    ident: 'postcss',
    plugins: (loader) => [
      require('postcss-import')({ root: loader.resourcePath }),
      require('postcss-preset-env')(),
      require('cssnano')()
    ]
  }
}

alias

webpack.config.js

{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-less-loader',
      options: {
        alias: {
            "@test": "/home/test"
        }
      }
    }
  ]
}

⚠️ webpack requires an identifier (ident) in options when {Function}/require is used (Complex Options). The ident can be freely named as long as it is unique. It's recommended to name it (ident: 'postcss')

Autoprefixing

webpack.config.js

{
  test: /\.s[ca]ss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-less-loader',
      options: {
        plugins: [
          require('autoprefixer')({...options}),
          ...,
        ]
      }
    }
  ]
}