在LESS中启用内联JavaScript

Question

我想在less文件中使用内联js，但出现以下错误信息：

内联JavaScript未启用。您的选项中是否设置了它？

如何启用它？

- pharkasbence

Answer 1

我曾遇到相同的问题，我使用了带有less loader的webpack，我需要在less loader配置中添加javascript选项：

我有同样的问题，我使用webpack和less加载器，我需要在less加载器配置中添加javascript选项：

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

我在less编译器的源代码中发现了如下内容：https://github.com/less/less.js/blob/3.x/bin/lessc

他们是这样解析js less选项的：

        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;

因此，在静态编译（命令行）中，您应该使用“--js”，在动态编译（例如webpack加载器）中，您应该使用“javascriptEnabled：true”来启用JavaScript。

- Davide Carpini

---

由于安全原因，此功能已被弃用。请参阅下面的其他答案以获取更多信息。 - Jimmy

准确地说：应避免使用内联JavaScript，但如果你无法轻易摆脱一个第三方包还在使用该技术，那么所提出的解决方案实际上是有帮助的。 - B--rian

Answer 2

仅更新接受的答案，从3.11.1开始，如果只使用options，它会抛出：

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? }

在less@3.11.1中，不应只使用options，而应该像这样使用lessOptions：

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

- CtrlX

Answer 3

更新时间：2020年5月

适用于less-loader版本6.1.0^

在 less-loader 版本 6.1.0^ 中，他们对该加载器进行了重大更改，如果您使用类似 Ant Design（或其他 LESS 和 JS 加载器），则通常会在 Webpack 配置中的“options”对象中添加 javascriptEnabled: true 标志。

在 6.1.0^ 版本中，此更改已更改为放置在 less loader 的选项配置下的 lessOptions 对象中。以下是我使用的解决方案，适用于我的 Webpack 配置捆绑包。

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

请注意，javascriptEnabled标志不在顶层选项对象下，而是在lessOptions子对象下。这是截至less-loader版本6.1.0的最新更新标准。

- Jonathon Tech

Answer 4

如果你正在使用lessc的CLI界面，那么你只需要在末尾加上--js。

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

- Ben Winding

Answer 5

出于安全考虑，默认情况下禁用内联JavaScript。原因是在线生成器有时会允许配置Less变量，然后直接解释它们。

这样做存在代码注入的风险，意味着JavaScript可能被注入到在服务器上直接运行的Less样式表中。

因此，内联JavaScript已被弃用（在3.x中默认设置为false），替代方案是使用@plugin语法和适当的JS插件。- （参见：http://lesscss.org/features/#plugin-atrules-feature）

是的，您仍然可以将编译选项设置为javascriptEnabled: true，但是这不被认为是样式表的最佳实践。通常，您的样式表不应包含JS。最好使用插件。

- Matthew Dean

Answer 6

我在使用最新版本的less时遇到了这个问题。然后我切换到2.7版本，问题得到了解决。

- Anderson Sousa

---

我在使用gulp-less的4.0.0版本时遇到了同样的问题，安装一个旧版本也解决了这个问题。谢谢。 - giovannipds

一样的，我切换到了 gulp-less 3.0.5 版本，这对我起作用了。 - Drew2

Answer 7

同意@matthew-dean和@davide-carpini所说的一切...但是对于任何寻找Grunt-LESS代码片段的人，这里是：

  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'
          }
      }
  },

这适用于我使用的"grunt-contrib-less": "^2.0.0"实现...你的情况可能会有所不同

- rwcorbett

Answer 8

我遇到了相同的问题，但是在使用vue-cli 4 + iViewUi主题自定义时。也许有人和我一样遇到了同样的问题。以下是解决方案：

在你的项目根目录下创建或使用已有的vue.config.js文件，并将以下代码（或部分代码）添加到其中。

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

但是请记住，出于安全原因，js默认是被禁用的。所以这是您自己的风险。

- ixpl0

Answer 9

针对任何 Vite 3 用户，以下是我如何为使用 less/react 的项目启用内联 JavaScript。

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

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

然而，在less中，内联JavaScript是一个已弃用的功能(link)

从v3.0.0开始，默认为false。启用.less文件中内联JavaScript的评估。这为一些开发人员带来了安全问题，他们没有预料到样式表的用户输入会有可执行代码。

- Ishan Madhusanka

---

它不起作用。在使用Vite 2.9.9和Antd 4.20.5时，我仍然会收到服务器内部错误：未启用内联JavaScript的错误信息。 - E.Eldridge

Answer 10

当我使用craco和craco-less并且通过我的.less文件自定义ant design的变量时，修改craco.config.js如下可以解决我的问题：

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

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

- zahra shahrouzi