Concat And Minify All Less Files With Webpack Without Importing Them

I have a folder of around 20 separate less files that I need to concatenate into a single file via Webpack and store this in my /dist folder. My current Webpack config file is as f

Solution 1:

Webpack is a module bundler and uses the module syntax for JavaScript (ES6, CommonJS, AMD..), CSS (@import, url) and even HTML (through src attribute) to build the app's dependency graph and then serialize it in several bundles.

In your case, when you import the *.less files the errors are because you miss CSS modules. In other words, on the places where you have used variables defined in other file, that file was not @import-ed.

With Webpack it's recommended to modularize everything, therefore I would recommend to add the missing CSS modules. I had the same issue when I was migrating a project from Grunt to Webpack. Other temporary solution is to create an index.less file where you will @import all the less files (note: the order is important) and then import that file in app's entry file (ex. boot.ts).