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:
- Add a less loader to our existing Webpack configuration file.
- Rename all our existing CSS files with LESS files with the same name.
- 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.