在 LESS 中启用内联 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46729091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable inline javascript in LESS
提问by pharkasbence
I would like to use inline js in my less files but I get the following message:
我想在我的 less 文件中使用内联 js，但我收到以下消息：
Inline JavaScript is not enabled. Is it set in your options?
内联 JavaScript 未启用。它是在您的选项中设置的吗？
How can I enable that?
我怎样才能启用它？
回答by Davide Carpini
I had same problem, I use webpack with less loader, I needed to add javascript option in less loader config:
我有同样的问题，我使用带有较少加载程序的 webpack，我需要在较少加载程序配置中添加 javascript 选项：
{
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
我在less编译器的源码中找到：https: //github.com/less/less.js/blob/3.x/bin/lessc
that they parse js less option in this way:
他们以这种方式解析 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;
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.
因此，您可能应该在静态编译（命令行）中使用 '--js' 或在动态编译（如 webpack loader ）中使用 'javascriptEnabled: true' 来启用 javascript。
回答by ixpl0
I had the same problem but in vue-cli 4+ iVueUitheme customization. Maybe somebody has same troubles like me. And that's solution:
我有同样的问题，但在vue-cli 4+iVueUi主题定制中。也许有人和我有同样的烦恼。这就是解决方案：
Create or use existing vue.config.jsfile at the root of your project. And add this code (or partically add) into it.
vue.config.js在项目的根目录创建或使用现有文件。并将此代码（或部分添加）添加到其中。
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
};
But remember that jsis disabled by default for security reasons. So that's at your own risk.
但请记住，js出于安全原因，默认情况下禁用。所以这是你自己的风险。
回答by CtrlX
Just to update the accepted answer,
只是为了更新接受的答案，
From 3.11.1, if you use just options, it will throw :
从 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? }
ValidationError: 无效的选项对象。Less Loader 已使用与 API 架构不匹配的选项对象进行初始化。- 选项具有未知属性“javascriptEnabled”。这些属性是有效的：object {lessOptions?, prependData?, appendData?, sourceMap?, implementation? }
In [email protected], it's not just optionsthat should be used, but lessOptionslike this :
在[email protected] 中，不仅options应该使用它，而且lessOptions像这样：
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true
}
}
}]
}
回答by Anderson Sousa
I got this problem when using the newest version of less. Then I switched to version 2.7 and I had it fixed.
我在使用最新版本的 less 时遇到了这个问题。然后我切换到 2.7 版并修复了它。
回答by Matthew Dean
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.
出于安全考虑，默认情况下禁用内联 JavaScript。发生的事情是，在线生成器有时会允许配置 Less 变量，然后直接解释这些变量。
This was vulnerable to code injection, meaning that JavaScript could be injected into a Less style sheet that ran on a server directly.
这很容易受到代码注入的影响，这意味着可以将 JavaScript 注入到直接在服务器上运行的 Less 样式表中。
For this reason, inline JavaScript has been deprecated (set to false by default in 3.x), and the replacement for that is the @pluginsyntax and using a proper JS plugin. - (See: http://lesscss.org/features/#plugin-atrules-feature)
出于这个原因，内联 JavaScript 已被弃用（在 3.x 中默认设置为 false），替代它的是@plugin语法和使用适当的 JS 插件。- （见：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.
是的，您仍然可以将编译选项设置为javascriptEnabled: true，但这不是样式表的最佳实践。通常，您的样式表中不应包含 JS。最好使用插件。
回答by rwcorbett
Yes to everything that @matthew-dean and @davide-carpini said... but for anyone looking for the Grunt-LESS code snippet here you go:
对@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'
}
}
},
this is working for my implementation using "grunt-contrib-less": "^2.0.0"... your mileage may vary
这适用于我的实现使用"grunt-contrib-less": "^2.0.0"......你的里程可能会有所不同
回答by Jonathon Tech
For less-loaderversion 6.1.0^.
对于less-loader版本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.
在“less-loader”版本 6.1.0^ 中，他们对加载器进行了重大更改，如果您使用 Ant Design（或其他 LESS 和 JS 加载器）之类的东西，通常会将 javascriptEnabled: true 标志添加到“options”对象在您的 Webpack 配置中。
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.
在版本 6.1.0^ 中，这被更改为放置在 lessOptions 对象中的 less 加载程序的选项配置下。这是我使用的解决方案，适用于我的 Webpack 配置包。
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^.
请注意，javascriptEnabled 标志不在顶级选项对象下，而是在lessOptions 子对象下。这是 less-loader 版本 6.1.0^ 的最新更新标准。
