less中怎么访问javascript？

Posted 2023-04-07

less中目前无法访问javascript，因为less只是对css进行了扩展封装。
less的优点：
1.清晰的css逻辑结构，使处于#header选择器的css样式全部写在#header样式块中。
2.样式变量，less官网称为混合模式
其中.red () color: red; .co border: 1px solid red; 与.red color: red; .co border: 1px solid red; 的写法，与效果是有本质区别的。
.red () color: red; .co border: 1px solid red; 相当建立了个样式变量，不会再css中显示，不会直接起作用，类似于未实例化。 只有在.class中调用才会起作用。调用的效果为.classcolor: red; .co border: 1px solid red;这就防止了废弃不被使用css样式
.red color: red; .co border: 1px solid red;是一个已经起作用的类，在.class中调用效果为 .classcolor: red; .red.co border: 1px solid red;。

less官网自带winless一个将less自动生成css的工具，会自动监控指定的less文件，只要文件被更改就会自动更新生成新的被压缩的css文件。 参考技术A 1、选择在页面中使用less.js编译
2、将less.js的引用放到页尾
那么，是可行的。其它方案下都是先变成CSS才执行，变成CSS的时候这个值还没影。

在 LESS 中启用内联 javascript

【中文标题】在 LESS 中启用内联 javascript

【英文标题】：Enable inline javascript in LESS

【发布时间】：2018-03-25 12:59:32

【问题描述】：

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

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

我该如何启用它？

【参考方案1】：

我也遇到了同样的问题，我使用 webpack 和 less loader，我需要在 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 加载器）中使用“javascriptEnabled: true”来启用 javascript。

【讨论】：

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

确切地说：应该避免使用 inline-javascript，如果您无法轻易摆脱的第 3 方包仍然这样做，那么所提供的解决方案实际上是有帮助的。

【参考方案2】：

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

【讨论】：

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

同样，我切换到 gulp-less 3.0.5，它对我有用

【参考方案3】：

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

这很容易受到代码注入的影响，这意味着可以将 JavaScript 注入到直接在服务器上运行的 Less 样式表中。

出于这个原因，内联 JavaScript 已被弃用（在 3.x 中默认设置为 false），取而代之的是 @plugin 语法并使用适当的 JS 插件。 - （见：http://lesscss.org/features/#plugin-atrules-feature）

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

【参考方案4】：

对 @matthew-dean 和 @davide-carpini 所说的一切都是肯定的……但对于任何寻找 Grunt-LESS 代码 sn-p 的人来说：

  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" 的实施...您的里程可能会有所不同

【参考方案5】：

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

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

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

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

【参考方案6】：

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

从 3.11.1 开始，如果你只使用options，它会抛出：

ValidationError：无效的选项对象。更少的装载机已经 使用与 API 不匹配的选项对象进行初始化 架构。 - 选项具有未知属性“javascriptEnabled”。这些属性是有效的：object lessOptions?, prependData?, appendData?，sourceMap?，实现？

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

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

【参考方案7】：

更新时间：2020 年 5 月

对于less-loader 版本6.1.0^。

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

在版本 6.1.0^ 中，此更改被放置在 less 加载器选项配置下的 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^ 的最新更新标准。

【参考方案8】：

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

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

【参考方案9】：

当我使用craco 和craco-less 并且还通过我的.less 文件自定义ant design 的变量时，像下面这样对craco.config.js 进行修正解决了我的问题：

const CracoLessPlugin = require('craco-less')

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