webpack-blocks-less

    0.2.0 • Public • Published

    webpack-blocks - less

    JavaScript Style Guide NPM Version

    This is the less block providing less support for webpack. Uses less via less-loader.

    Usage

    const { createConfig } = require('@webpack-blocks/webpack')
    const less = require('webpack-blocks-less')
     
    module.exports = createConfig([
      less(/* less options */)
    ])

    Use match() to explicitly specify on which files to apply the block:

    const { createConfig, match } = require('@webpack-blocks/webpack')
    const less = require('webpack-blocks-less')
     
    module.exports = createConfig([
      match('*.scss', { exclude: path.resolve('node_modules') }, [
        less(/* less options */)
      ])
    ])

    Options

    minimize (optional)

    Enable CSS minification (by passing this option to css-loader).

    less options

    You can pass any less-loader as an object to the less block.

    Examples

    Extract text plugin

    Use the extract-text block to extract the compiled Less styles into a separate CSS file:

    const { createConfig, match, env } = require('@webpack-blocks/webpack')
    const less = require('webpack-blocks-less')
    const extractText = require('@webpack-blocks/extract-text')
     
    module.exports = createConfig([
      match('*.scss', [
        less({ minimize: true }),
        env('production', [extractText()])
      ])
    ])

    Make sure you use the extract-text block after the less block.

    CSS Modules

    You can use Less in combination with CSS modules.

    const { createConfig, match } = require('@webpack-blocks/webpack')
    const less = require('webpack-blocks-less')
    const { css } = require('@webpack-blocks/assets')
     
    module.exports = createConfig([
      match('*.les', [
        less(),
        css.modules()
      ])
    ])

    PostCSS

    You can use the Less block together with PostCSS (using the postcss block) and its plugins, like the Autoprefixer.

    const { createConfig, match } = require('@webpack-blocks/webpack')
    const less = require('webpack-blocks-less')
    const postcss = require('@webpack-blocks/postcss')
    const autoprefixer = require('autoprefixer');
     
    module.exports = createConfig([
      match('*.less', [
        less(),
        postcss([autoprefixer()])
      ])
    ])

    webpack-blocks

    Check out the

    👉 Main documentation

    Released under the terms of the MIT license.

    Keywords

    none

    Install

    npm i webpack-blocks-less

    DownloadsWeekly Downloads

    8

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • kirill.konshin