39

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?

pharkasbence
  • 957
  • 3
  • 9
  • 25

10 Answers10

58

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.

Davide Carpini
  • 1,581
  • 17
  • 15
  • 1
    This has been deprecated for security reasons. Please see the other below answers for further information. – Jimmy Oct 11 '19 at 14:00
  • 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. – B--rian Oct 22 '19 at 09:42
32

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 less@3.11.1, 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
          }
        }
    }]
}
kaleazy
  • 5,922
  • 2
  • 47
  • 51
CtrlX
  • 6,946
  • 1
  • 17
  • 21
11

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^.

Jonathon Tech
  • 331
  • 3
  • 7
5

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
Ben Winding
  • 10,208
  • 4
  • 80
  • 67
2

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

2

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.

Matthew Dean
  • 658
  • 7
  • 9
2

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

rwcorbett
  • 473
  • 5
  • 12
2

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.

ixpl0
  • 748
  • 5
  • 15
1

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,
                    },
                },
            },
        },
    ],
}
zahra shahrouzi
  • 862
  • 7
  • 18
1

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.

Ishan Madhusanka
  • 641
  • 1
  • 11
  • 21
  • 1
    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 – E.Eldridge May 20 '22 at 11:59