postcss-less-loader

0.1.0-alpha.2 • Public • Published

PostCSS Loader

Loader for webpack to process LESS with PostCSS

Install

npm i -D postcss-less-loader

Usage

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'
        ]
      }
    ]
  }
}

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

{
  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')

Examples

Autoprefixing

webpack.config.js

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

/postcss-less-loader/

    Package Sidebar

    Install

    npm i postcss-less-loader

    Weekly Downloads

    287

    Version

    0.1.0-alpha.2

    License

    ISC

    Unpacked Size

    12.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • shaoyudong