5

webjars から font-awesome を使用するには、wro4j の構成に助けが必要です。次の構成ファイルがあります。

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

    <group name="angular-bootstrap">
<!--        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/less/bootstrap.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/less/theme.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/font-awesome/4.4.0/less/font-awesome.less</css> -->
<!--        <css>classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/less/flag-icon.less</css> -->
        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/css/bootstrap.min.css</css>
        <css>classpath:META-INF/resources/webjars/bootstrap/3.3.4/css/bootstrap-theme.min.css</css>
        <css>classpath:META-INF/resources/webjars/font-awesome/4.4.0/css/font-awesome.min.css</css>
        <css>classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/css/flag-icon.min.css</css>
        <css>file:${project.basedir}/src/main/wro/main.less</css>
        <js>webjar:jquery/2.1.1/jquery.min.js</js>
        <js>webjar:angularjs/1.4.4/angular.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-route.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-cookies.min.js</js>
        <js>webjar:angularjs/1.4.4/angular-animate.min.js</js>
        <js>webjar:angular-resource/1.4.5/angular-resource.min.js</js>
        <js>webjar:angular-translate/2.7.2/angular-translate.min.js</js>
<!--        <js>webjar:angular-translate-loader-static-files/2.6.1-1/angular-translate-loader-static-files.min.js</js> -->
        <js>webjar:bootstrap/3.3.4/js/bootstrap.min.js</js>
    </group>

</groups>

しかし、html ページが読み込まれると、フォント文字が表示されません。コンソールにエラー メッセージは表示されません。

これは、wro4j の私の Maven 構成です。

<plugin>
                <groupId>ro.isdc.wro4j</groupId>
                <artifactId>wro4j-maven-plugin</artifactId>
                <version>${wro4j.version}</version>
                <executions>
                    <execution>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>

                <configuration>
                    <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
                    <cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
                    <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
                    <wroFile>${project.build.directory}/wro/wro.xml</wroFile>
                    <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
                    <contextFolder>${basedir}/src/main/wro</contextFolder>
                </configuration>

                <dependencies>
                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>jquery</artifactId>
                        <version>2.1.1</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angularjs</artifactId>
                        <version>1.4.4</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>bootstrap</artifactId>
                        <version>3.3.4</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>font-awesome</artifactId>
                        <version>4.4.0</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>flag-icon-css</artifactId>
                        <version>0.7.1</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars.bower</groupId>
                        <artifactId>angular-resource</artifactId>
                        <version>1.4.5</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angular-translate</artifactId>
                        <version>2.7.2</version>
                    </dependency>

                    <dependency>
                        <groupId>org.webjars</groupId>
                        <artifactId>angular-translate-loader-static-files</artifactId>
                        <version>2.6.1-1</version>
                    </dependency>

                </dependencies>
            </plugin>

そして私の構成プロパティファイル：

#List of preProcessors
preProcessors=cssUrlRewriting,cssImport,lessCssImport
#List of postProcessors
postProcessors=less4j,jsMin,cssMin
4

3 に答える 3

4

遅すぎるかもしれませんが、私は同じ問題を抱えていて、maven プラグインで解決しました。

問題は、wro4j プラグインが webjars 依存関係のフォント ファイルを気にしないため、最終的にフォントが利用できないことです。

最初のプラグイン : Webjar をノード${project.build.directory}/unpackedの下にリストされている Webjar に解凍し、artifactItemsディレクトリ「fonts」のすべてのファイルを含めます ( **/fonts/**/*)

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <version>2.10</version>
            <executions>
                <execution>
                    <id>unpack-fonts</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>unpack</goal>
                    </goals>
                    <configuration>
                        <artifactItems>
                            <artifactItem>
                                <groupId>org.webjars</groupId>
                                <artifactId>bootstrap</artifactId>
                                <version>3.2.0</version>
                                <type>jar</type>
                                <overWrite>false</overWrite>
                            </artifactItem>
                            <artifactItem>
                                <groupId>org.webjars</groupId>
                                <artifactId>font-awesome</artifactId>
                                <version>4.5.0</version>
                                <type>jar</type>
                                <overWrite>false</overWrite>
                            </artifactItem>
                        </artifactItems>
                        <includes>**/fonts/**/*</includes>
                        <outputDirectory>${project.build.directory}/unpacked</outputDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>

2 番目のプラグイン: フォント ファイルを generated-resources の「デフォルト」ディレクトリにコピーします。

        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.7</version>
            <executions>
                <execution>
                    <id>copy-fonts</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.directory}/generated-resources/static/fonts</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${project.build.directory}/unpacked/META-INF/resources/webjars/bootstrap/3.2.0/fonts</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                                <filtering>false</filtering>
                            </resource>
                            <resource>
                                <directory>${project.build.directory}/unpacked/META-INF/resources/webjars/font-awesome/4.5.0/fonts</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                                <filtering>false</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

私の場合、ブートストラップ フォント ファイルと font-awesome フォント ファイルが必要なので、両方の webjar を解凍してコピーしますが、1 つまたは 2 つ以上の webjar の構成を調整できます。

私は初心者でもmavenの専門家でもないので、私の答えは改善される可能性があると言わざるを得ません。

これが誰かを助けることを願っています。;)

ストロー

于 2016-02-10T00:39:49.550 に答える
-1

wro4j maven プラグインを使用しています。プロセッサを適用している間、次の形式の URL を持つクラスパス リソースを参照します。

classpath:META-INF/resources/webjars/flag-icon-css/0.7.1/css/flag-icon.min.css, imageUrl ../flags/1x1/yt.svg

この種の URL は、公開されていないクラスパス リソースにアクセスしようとしているため、そのままでは有効ではありません。最も簡単な回避策は、クラスパス リソースを処理するランタイム ソリューションを使用することです (WroFilter を使用)。もう 1 つのアプローチはハイブリッド ソリューションであり、maven プラグインを使用してバンドルを生成し、サーブレット (WroFilter と同様) がクラスパス リソースの提供を担当します。これにはwebjars-servletプロジェクトが役立つ場合があります。

ランタイムとビルド時のソリューションの両方で機能するサンプル プロジェクトを作成しようとします。セットアップはあなたのものに似ており、利用可能になったらコメントでお知らせします。

于 2015-10-05T09:05:31.970 に答える