在 LESS 中启用内联 javascript

Question

我想在我的 less 文件中使用内联 js，但我收到以下消息：

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

我怎样才能启用它？

Answer 1

我有同样的问题，我使用带有 less loader 的 webpack，我需要在 less loader 配置中添加 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 loader）中使用'javascriptEnabled: true'来启用javascript.

Answer 2

我在使用最新版本的 less 时遇到了这个问题。然后我切换到2.7版本并修复了它。

Answer 3

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

这容易受到代码注入的攻击，这意味着 JavaScript 可以直接注入服务器上运行的 Less 样式 sheet。

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

是的，您仍然可以将编译选项设置为 javascriptEnabled: true，但这不是样式 sheet 的最佳实践。一般来说，你的风格 sheet 不应该有 JS 在里面。最好用个插件。

Answer 4

对@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" 的实施...您的情况可能会有所不同

Answer 5

我遇到了同样的问题，但在 vue-cli 4 + iVueUi 主题定制中。也许有人和我有同样的烦恼。这就是解决方案：

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

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

但请记住，出于安全原因，默认情况下禁用 js。所以这需要您自担风险。

Answer 6

只是为了更新已接受的答案，

从 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
          }
        }
    }]
}

Answer 7

更新时间：2020 年 5 月

对于`less-loader`版本6.1.0^.

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

在版本 6.1.0^ 中，这是为了放置在 lessOptions 对象中的 lessOptions 对象中，该对象位于 less 加载器的选项配置下。这是我使用的解决方案，适用于我的 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^ 的最新更新标准。

Answer 8

如果您使用的是 lessc cli 界面，那么您只需要在最后添加 --js。

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

Answer 9

因为我正在使用 craco 和 craco-less 并且还通过我的 .less 文件自定义 ant design 的变量，midifying craco.config.js 如下修复了我的问题：

const CracoLessPlugin = require('craco-less')

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

Answer 10

对于任何 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,
      },
    },
  },
});

但是，内联 javascript 是 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.

在 LESS 中启用内联 javascript

Enable inline javascript in LESS

javascript

less

npm

laravel-mix

对于`less-loader`版本6.1.0^.

在 LESS 中启用内联 javascript

Enable inline javascript in LESS

javascript

less

npm

laravel-mix

对于less-loader版本6.1.0^.

对于`less-loader`版本6.1.0^.