Файлы CSS из файлов LESS не создаются при использовании WebPack

Question

У меня есть 2 МЕНЬШИХ файла:

**styles/consts.less**

    @gray: #202020;

**styles/main.less**

    @import 'consts.less';

    body { background-color: @gray; }

Я попытался скомпилировать, минимизировать и связать 2 файла меньше, используя 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']
      }
    ]
  }

};

Я бы хотел, чтобы полученный файл styles.min.css был помещен в папку dist.

Файл javascript scripts.min.js успешно создан ...

Однако файл CSS styles.min.css из файлов LESS не является.

Что я делаю не так?

Answer 1

Вы забыли импортировать меньше файлов в ваши файлы js?