将 LESS 与 grails lesscss-resource 一起使用答案

【问题标题】：Using LESS with grails lesscss-resource将 LESS 与 grails lesscss-resource 一起使用
【发布时间】：2012-11-10 04:33:32
【问题描述】：

我找不到在我的 grails 应用程序中设置它的好解释。我正在使用最新版本的 lessees-resource 插件运行 grails 2，但我找不到有关如何设置它的深入解释。

我应该把较少的文件放在哪里？

它将被编译成什么？

我应该如何链接到这个编译的源代码？

如果这是一个简单的问题，我很抱歉，但我根本找不到关于此的好的文档。

为了具体到我需要的内容，我拥有整个 TwitterBootstrap 项目较少的文件。

我使用 Theme.less 来覆盖更改，方法是将所有文件导入此文件，并使更改独立于实际项目，从而更轻松地更新引导程序。

/less
  Theme.less
  Bootstrap/ #The entire twitter bootstrap project

如何编译 Theme.less 以及如何在我的应用程序主布局中引用它

【问题讨论】：

标签： grails plugins less

【解决方案1】：

您必须在ApplicationResources.groovy 文件（在<your_project>/grails-app/conf 文件夹中）声明您的资源文件。

它应该看起来像这样：

modules = {
    application {
        resource url:'js/application.js'
    }

    bootstrap {
        dependsOn 'jquery'
        resource url:'js/libs/bootstrap.js'
        resource url:'css/libs/bootstrap.less',attrs:[rel: "stylesheet/less", type:'css']
    }

    yourstyle {
        dependsOn 'bootstrap'
        resource url:'css/theme.less',attrs:[rel: "stylesheet/less", type:'css']
    }
}

请注意，您可以将 less 文件放在 web-app 文件夹中的任何位置，您可以在此文件中配置它们的位置。

如果要覆盖 Twitter Bootstrap，您可以做的另一件事是在 theme.less 文件的开头导入 bootstrap：

@import "libs/bootstrap.less";

并删除ApplicationResources.groovy 中的此资源声明。如果你这样做，如果你在项目运行时进行更改，编译更少的文件将需要更长的时间（它必须编译两个更少的文件）。

要在您的布局中使用此模块（即 main.gsp），请包含以下代码行：

<!doctype html>
    <head>
        ...
        <r:require module="yourstyle"/>
        <r:layoutResources />
    </head>
    <body>
        ...
        <r:layoutResources />
    </body>
</html>

您需要在页面中添加两次layoutResources标签，用于资源和正文资源（因为您可以声明要在哪里包含您的资源，默认情况下在body的末尾标签）。您可以在http://grails-plugins.github.com/grails-resources/

阅读有关 Grails 资源如何工作的更多信息

请注意，“您的风格”已经依赖于“引导程序”，因此您无需在布局中同时包含它们。

【讨论】：

谢谢你，清除了很多。我如何在 main.gsp 布局中需要这些模块？
我必须添加 bundle:'bootstrap' 来编译更少的文件（我结合了 bootstrap 和 yourstyle 并将文件移动到 less 目录。它现在正在创建一个链接到但我收到一条错误消息“错误 2012-11-10 16:38:14,604 [ http-bio-8080-exec-9] 错误资源。ResourceMeta - 找不到资源：/bundle-bootstrap_head.css"。
你能复制你的代码，看看你是如何声明和使用 Bootstrap 样式和你自己的 less 文件的吗？
我知道我做错了什么。我需要在资源中添加 disposition: 'head' 。资源 url:"less/theme.less",attrs:[rel:"stylesheet/less", type:'css'], disposition:'head'

【解决方案2】：

less-resources 和 lesscss-resources 目前（2014 年 3 月）都不能使用构建 bootstrap 3.1 所必需的 less 1.6

你可以用同样的方式使用asual-lesscss-resources插件

bootstrap{
    defaultBundle 'bootstrap'
    resource url:[dir: 'less', file: 'bootstrap.less'], attrs:[rel: "stylesheet/less", type:'css']
    resource url: 'js/bootstrap/dropdown.js'
  }

【讨论】：