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?

Have you imported the less files into your js files? If yes, can you try removing the first 2 lines in minimizer? — Sreeram Padmanabhan
– Sreeram Padmanabhan, Commented Jun 28, 2019 at 11:07

Sreeram Padmanabhan · Accepted Answer · 2019-06-28 16:16:25Z

1

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

answered Jun 28, 2019 at 16:16

Sreeram Padmanabhan

1,1266 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS files from LESS files are not created when using WebPack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related