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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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.