Alternatively, we can also change our existing Webpack configuration to make it compile the LESS files into CSS. This can be done in the following way:

1. Add a less loader to our existing Webpack configuration file.
2. Rename all our existing CSS files with LESS files with the same name.
3. Reference the less files in the components instead of the css ones.

Choosing this path will require installing the Webpack less-loader using NuGet:

npm install --save-dev less-loader less

Then, it will require adding the appropriate rule in the webpack.config.js file in the following way:

[...]

    module: {
        rules: [

[...]

        {
            test: /.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS  
                                                              strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }

[...]

Such a method is absolutely viable; on top of that, since it will seamlessly integrate with the Webpack workflow, it will even save us the trouble of installing a separate tool. However, we didn't choose it because we wanted to actually be able to see the transformation between LESS and CSS syntax, which is a great deal for learning purposes.