Awesome
webpack-blocks - less
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.