2

grailsアプリでこれを設定するための適切な説明が見つかりませんでした。最新バージョンのlessees-resourceプラグインを使用してgrails2を実行していますが、これを設定する方法についての詳細な説明が見つかりません。

少ないファイルはどこに置きますか？

何にコンパイルされますか？

このコンパイル済みソースにどのようにリンクする必要がありますか？

これが簡単な質問である場合は申し訳ありませんが、これに関する適切なドキュメントをまったく見つけることができませんでした。

必要なものに具体的に言うと、TwitterBootstrapプロジェクト全体のファイル数が少なくなっています。

Theme.lessを使用して、すべてのファイルをこのファイルにインポートし、実際のプロジェクトから独立して変更を加えて、ブートストラップの更新を容易にすることで、変更をオーバーライドします。

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

Theme.lessをコンパイルするにはどうすればよいですか？また、アプリケーションのメインレイアウトでそれを参照するにはどうすればよいですか？

4

2 に答える 2

6

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

web-appless ファイルは、フォルダー内の好きな場所に配置できることに注意してください。このファイルでは、ファイルの場所を構成します。

Twitter Bootstrap を上書きする場合にできるもう 1 つの方法は、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リソースと end-of-body リソースのために、ページにタグを 2 回追加する必要があります (リソースを含める場所をデフォルトでbodyタグの最後に宣言できるため)。Grails リソースの仕組みについて詳しくは、 http: //grails-plugins.github.com/grails-resources/を参照してください。

「your style」はすでに「bootstrap」に依存しているため、レイアウトに両方を含める必要はありません。

于 2012-11-10T11:50:52.227 に答える
0

less-resources と lesscss-resources は現在 (2014 年 3 月)、ブートストラップ 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'
  }
于 2015-03-04T18:09:07.473 に答える