How to replace the deprecated javascriptEnabled option in less-loader with a new plugin

Question

I need to use inline js for my less files, and previously had a webpack config with something like this to enable inline js:

module.exports = {
  ...
  module: {
    ...
    rules: [
      ...
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: { javascriptEnabled: true },
          },
        ],
      },
    ],
  },
};

However the javascriptEnabled option has been deprecated and the replacement for this is to use the @plugin syntax and use a js plugin. However, I am a bit confused by the docs and how exactly to implement a plugin and which plugin should be implemented in my webpack config to replace this now deprecated option so I can still use inline js. How can I go about doing this? Thanks.

Answer 1

Inline javascript has been deprecated for security concerns. It was vulnerable to code injection. Therefor it is strongly advised to not use inline javascript.

You could use an older version from before javascriptEnabled was deprecated if you really wanted to use it that badly, but I suppose that answer would be too simple. So here is this.

I did some research and I guess you got your idea to use plugins from this question. My guess is that the author here didn't mean to replace javascriptEnabled from less-loader with a webpack plugin to achieve a similar way of writing inline javascript. I guess he meant that every piece of inline javascript should be rewritten as a less plugin for security reasons.

If you think about it that way, the docs suddenly make more sense.

You could replace your inline javascript with different Less plugins like the docs you provided show:

// my-plugin.js
install: function(less, pluginManager, functions) {
    functions.add('pi', function() {
        return Math.PI;
    });
}
// etc

If you were to use this in your stylesheet:

@plugin "my-plugin";
.show-me-pi {
  value: pi();
}

You would get:

.show-me-pi {
  value: 3.141592653589793;
}

Answer 2

Here is a modification/extension of @Luze's appoach, documentation here:

myPluginFile.js:

const axios = require('axios').default

module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add("blue", function () {

      const headers = {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        timestamp: +new Date(),
      }  
      
      try {
        const method = 'get'
        const url = 'https://myAPI.com/myFile.json'
        const options = { headers: { ...headers } }
        const { data } = await axios[method](url, {}, options)
        return data
      } catch (error) {
        console.info('Error', { msg: error.message })
      }
    });
  },
};

myStyleFile.less:

@plugin "myPluginFile";

/* Style the body */
body {
  color: blue();
}