Just a quick update on the solution that was accepted:

Starting from version 3.11.1, using only the options parameter will result in an error being thrown:

ValidationError: The options object is invalid. The Less Loader has been initialized with an options object that does not conform to the API schema. - The 'javascriptEnabled' property in options is unrecognized. Valid properties include: object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

In the latest release of [email protected], it's essential to use not just options, but also include the lessOptions parameter like so :

{
    test: /\.less$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "less-loader",
        options: {
          lessOptions: {
             javascriptEnabled: true
          }
        }
    }]
}

Specific to less-loader version 6.1.0^.

The latest "less-loader" release, version 6.1.0^, introduced significant changes to the loader. For users incorporating libraries like Ant Design (or similar LESS and JS loaders), it used to be common practice to include the javascriptEnabled: true flag within the "options" object in the Webpack configuration.

With version 6.1.0^, this placement has shifted to being nested under the lessOptions object within the options configuration specific to the less loader. Below is the solution that successfully integrates this update into my existing Webpack bundle setup.

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
            loader: "less-loader",
            options: {
                lessOptions: {
                    javascriptEnabled: true,
                }
            }
        }
    ]
}]}

Note the relocation of the javascriptEnabled flag from the main options object to the lessOptions sub-object – this adjustment reflects the current standard for using less-loader version 6.1.0^.

When utilizing the lessc command-line interface, simply append --js to achieve the desired outcome.

lessc --js ./styles/theme.less ./styles/theme.css

Encountered an issue while using the latest version of less, but switching to version 2.7 resolved it successfully.

By default, inline JavaScript was disabled for security reasons. The issue arose when online generators allowed the configuration of Less variables that were then directly interpreted.

This posed a risk of code injection, where JavaScript could be injected into a Less style sheet running on a server.

To address this vulnerability, inline JavaScript has been deprecated (set to false by default in version 3.x), and the recommended alternative is the @plugin syntax along with a proper JS plugin implementation. - (More information: )

While it is still possible to enable compilation options like javascriptEnabled: true, it is not considered best practice for style sheets. Generally, style sheets should not contain JS and should instead rely on plugins.

Absolutely agree with the insights provided by @matthew-dean and @davide-carpini! For those in need of the Grunt-LESS code snippet, look no further:

  less: {
      dev: {
          options: {
              paths: ['Styles/less'],
              plugins: [
                  new(require('less-plugin-autoprefix'))({
                      browsers: ['last 2 versions']
                  }),
                  new(require('less-plugin-clean-css'))({
                      sourceMap: true,
                      advanced: true
                  })
              ],
              relativeUrls: true,
              javascriptEnabled: true
          },
          files: {
              'Styles/less/main.css': 'Styles/less/main.less'
          }
      }
  },

This setup has been successfully implemented with "grunt-contrib-less": "^2.0.0" on my end... but results may vary based on your specific environment.

I encountered a similar issue while working with vue-cli 4 and the iVueUi theme customization. It's possible that others are facing the same challenges as well. Here is a possible solution:

To address this issue, you can either create a new or utilize an existing vue.config.js file at the root directory of your project. Then, add the following code snippet (or modify it) to the file:

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
};

It is important to note that for security reasons, js is disabled by default. Therefore, implementing this solution is done at your own risk.

For all Vite 3 users, I found a way to enable inline JavaScript in projects using Less and React.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

It's worth noting that inline JavaScript is now considered deprecated in Less (link)

As of v3.0.0, inline JavaScript evaluation in .less files is false by default. Some developers were concerned about the security implications of allowing user input in stylesheets to contain executable code.

While utilizing craco, craco-less, and customizing ant design's variables in my .less file, I encountered an issue that was resolved by making the following adjustments to my craco.config.js:

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
}