Install

1npm i -D postcss-less-loader

Usage

Configuration

postcss.config.js

1module.exports = {
2  plugins: [
3      require('autoprefixer')
4  ]
5}

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.s[ca]ss$/,
6        use: [ 'style-loader', 'css-loader', 'postcss-less-loader' ]
7      }
8    ]
9  }
10}

webpack.config.js (recommended)

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/,
6        use: [
7          'style-loader',
8          { loader: 'css-loader', options: { alias: { "@test": "/home/test"} } },
9          'postcss-less-loader'
10        ]
11      }
12    ]
13  }
14}

Options

Name	Type	Default	Description
config	{Object}	undefined	Set postcss.config.js config path && ctx
plugins	{Array|Function}	[]	Set PostCSS Plugins
sourceMap	{String|Boolean}	false	Enable Source Maps
alias	{Object}	undefined	Set import alias

Plugins

webpack.config.js

1{
2  loader: 'postcss-less-loader',
3  options: {
4    ident: 'postcss',
5    plugins: (loader) => [
6      require('postcss-import')({ root: loader.resourcePath }),
7      require('postcss-preset-env')(),
8      require('cssnano')()
9    ]
10  }
11}

alias

webpack.config.js

1{
2  test: /\.s[ca]ss$/,
3  use: [
4    'style-loader',
5    'css-loader',
6    {
7      loader: 'postcss-less-loader',
8      options: {
9        alias: {
10            "@test": "/home/test"
11        }
12      }
13    }
14  ]
15}

⚠️ 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')

Examples

Autoprefixing

webpack.config.js

1{
2  test: /\.s[ca]ss$/,
3  use: [
4    'style-loader',
5    'css-loader',
6    {
7      loader: 'postcss-less-loader',
8      options: {
9        plugins: [
10          require('autoprefixer')({...options}),
11          ...,
12        ]
13      }
14    }
15  ]
16}