Skip to content

Dynamic variables for hot reloading #196

@kiuma

Description

@kiuma

Hello I'd like the following feature to be added to the loader because using modyfyVars as loader option is static.

I've created a POC extending the actual loader that seems to work. The idea is to append variables as imports in the source.

Here it is how I've managed to make it work.

The loader devless-loader.js

const lessLoader = require('less-loader');
const getOptions = require('less-loader/dist/getOptions');

function devlessLoader(source) {
    const loaderContext = this;
    lessLoader.bind(loaderContext);

    const options = getOptions(loaderContext);


    lessLoader.call(loaderContext, options.inject ? `${[].concat(source, options.inject).join("\n")}` : source);
}

module.exports = devlessLoader;

And here how I used it in my webpack.config.js

const lessLoaderUse = isProd ?
    ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{loader: 'css-loader'}, {loader: 'less-loader', options: {modifyVars: lessVars}}]
    })
    : [
        {loader: 'style-loader'},
        {loader: 'css-loader'},
        {
            loader: './devless-loader',
            options: {
                inject: '@import "~www/style/variables.less";'
            }
        }];
......
module: {
        rules: [
.....
           {
                test: /\.less$/,
                use: lessLoaderUse
            },
]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions