Enable inline javascript in LESS

Question

I would like to use inline js in my less files but I get the following message:

Inline JavaScript is not enabled. Is it set in your options?

How can I enable that?

Narcoanalysis

Answer 1

I had same problem, I use webpack with less loader, I needed to add javascript option in less loader config:

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

I found in the sourcecode of less compiler: https://github.com/less/less.js/blob/3.x/bin/lessc

that they parse js less option in this way:

        case 'js':
            options.javascriptEnabled = true;
            break;
        case 'no-js':
            console.error('The "--no-js" argument is deprecated, as inline JavaScript ' + 
                'is disabled by default. Use "--js" to enable inline JavaScript (not recommended).');
            break;

So you should probably use '--js' in a static compilation ( command line ) or 'javascriptEnabled: true' in a dynamic compilation ( like webpack loader ) to enable javascript.

Invent

This has been deprecated for security reasons. Please see the other below answers for further information. – Repugn

To be precise: Using inline-javascript should be avoided, if a 3rd party package you cannot easily get rid of still does that, the presented solution is actually helpful. – Heptameter

Answer 2

Just to update the accepted answer,

From 3.11.1, if you use just options, it will throw :

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'javascriptEnabled'. These properties are valid: object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

In [email protected], it's not just options that should be used, but lessOptions like this :

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

Delineation

Answer 3

Updated: May 2020

For less-loader version 6.1.0^.

In "less-loader" version 6.1.0^ they made breaking changes to the loader that, if you used something like Ant Design (or other LESS and JS loaders) you would nomally add the javascriptEnabled: true flag to the "options" object in your Webpack configuration.

In version 6.1.0^ this was change to be placed in the lessOptions object under the options configuration for the less loader. Here is the solution I used, that works for my Webpack configuration bundle.

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

Notice that the javascriptEnabled flag is not under the top-level options object, but it, instead, under the lessOptions sub-object. That is the latest updated standard as of less-loader version 6.1.0^.

Retired

Answer 4

If you're using the lessc the cli interface then you just need --js on the end.

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

Hindi

Answer 5

I got this problem when using the newest version of less. Then I switched to version 2.7 and I had it fixed.

Calefacient

I've got the same problem with version 4.0.0 of gulp-less, installing an older version solved the issue too. Thanks. – Lyndsaylyndsey

Same, I switched to gulp-less 3.0.5 and it worked for me – Comparative

Answer 6

Inline JavaScript was disabled by default for security concerns. What was happening is that online generators would sometimes allow configuration of Less variables that they then interpreted directly.

This was vulnerable to code injection, meaning that JavaScript could be injected into a Less style sheet that ran on a server directly.

For this reason, inline JavaScript has been deprecated (set to false by default in 3.x), and the replacement for that is the @plugin syntax and using a proper JS plugin. - (See: http://lesscss.org/features/#plugin-atrules-feature)

Yes, you can still set compilation options to javascriptEnabled: true, but this is not considered best practice for style sheets. In general, your style sheet should not have JS in it. It's better to use a plugin.

Dendro

Answer 7

Yes to everything that @matthew-dean and @davide-carpini said... but for anyone looking for the Grunt-LESS code snippet here you go:

  less: {
      dev: {
          options: {
              paths: ['Content/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: {
              'Content/less/site.css': 'Content/less/site.less'
          }
      }
  },

this is working for my implementation using "grunt-contrib-less": "^2.0.0" ... your mileage may vary

Triceps

Answer 8

I had the same problem but in vue-cli 4 + iVueUi theme customization. Maybe somebody has same troubles like me. And that's solution:

Create or use existing vue.config.js file at the root of your project. And add this code (or partically add) into it.

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

But remember that js is disabled by default for security reasons. So that's at your own risk.

Charentemaritime

Answer 9

as i was using craco and craco-less and also customizing ant design's variable through my .less file ,modifying craco.config.js like below fixed my problem:

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

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

Transmission

Answer 10

For any Vite 3 users out there, the following is how I enabled inline javascript for a project with less/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,
      },
    },
  },
});

However, inline javascript is a deprecated feature on less (link)

False by default starting in v3.0.0. Enables evaluation of JavaScript inline in .less files. This created a security problem for some developers who didn't expect user input for style sheets to have executable code.

Quintin

It doesn't work. I still get Internal server error: Inline JavaScript is not enabled. when using Vite 2.9.9 and Antd 4.20.5 – Mcfarland