2 years ago

#49981

test-img

elitastic

use less in html inline style

Is it possible to setup webpack, that I could use less in my html templates like:

// xy.html
<style type="text/less">
    color: @myColor;
</style>

Currently the css/less part of my webpack config looks like:

{
    test: /\.css$/i,
    loader: ['css-loader?esModule=false', 'less-loader'],
    issuer: /\.html?$/i
},
{
    test: /\.css$/i,
    loader: ['style-loader', 'css-loader'],
    issuer: /\.[tj]s$/i
},
{
    test: /\.less$/i,
    loader: ['css-loader?esModule=false', 'less-loader'],
    issuer: /\.html?$/i
},
{
    test: /\.less$/i,
    loader: ['style-loader', 'css-loader', 'less-loader'],
    issuer: /\.[tj]s$/i
},
{
    test: /\.html$/,
    use: [{
        loader: 'html-loader',
        options: {
            minimize: true
        }
    }]
},

Currently I am still using Webpack 4, as one of my dependencies does not yet support Webpack 5.

Thanks a lot for any help!

webpack

less-loader

0 Answers

Your Answer

Accepted video resources