CSS files from LESS files are not created when using WebPack

Question

I have 2 LESS files:

**styles/consts.less**

    @gray: #202020;

**styles/main.less**

    @import 'consts.less';

    body { background-color: @gray; }

I tried to compile, minify and bundle the 2 less files using Webpack:

const webpack = require('webpack');

var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.min.css',
    })
  ],

  resolve: {
    extensions: ['.js'],
  },

  entry: {
    'scripts.min': './scripts/scripts.js',
  },  

  output: {
    path:  __dirname + '/dist',
    filename: '[name].js'
  },

  optimization: {
    minimizer: [
      new MiniCssExtractPlugin({}),
      new OptimizeCSSAssetsPlugin({}),      
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      })
    ]
  },

  module: {
    rules: [
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }

};

I would like the resulting file, styles.min.css, to be placed on dist folder.

The javascript file scripts.min.js is successufuly created ...

However the CSS file styles.min.css from the LESS files is not.

What am I doing wrong?

Answer 1

Did you forget to import the less files into your js files?