css - Wro4j:从 LESS 文件生成 CSS 文件

标签 css less wro4j

编辑原始问题以提供所有详细信息。

在 web.xml 中添加了以下内容:

<filter>
    <filter-name>WroContextFilter</filter-name>
    <filter-class>ro.isdc.wro.http.WroContextFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>WroContextFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

<filter>
    <filter-name>WebResourceOptimizer</filter-name>
    <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    <init-param>
        <param-name>targetBeanName</param-name>
        <param-value>wroFilter</param-value>
    </init-param>
    <init-param>
        <param-name>targetFilterLifecycle</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>WebResourceOptimizer</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

在 WEB-INF 文件夹中创建了两个新文件 wro.xml 和 wro.properties:

wro.properties:

managerFactoryClassName=ro.isdc.wro.manager.factory.ConfigurableWroManagerFactory
preProcessors=less4j,cssUrlRewriting,lessCssImport
postProcessors=less4j
disableCache=true

wro.xml:

<groups xmlns="http://www.isdc.ro/wro">
    <group name="base">
        <css>/resources/skins/abc/testing.less</css>
    </group>
</groups>

这里'resources'是里面的一个文件夹:src/main/webapp。

在/resources/skins/abc/文件夹中添加了一个文件 testing.less:

.btn-expand (@height: 30px) {
        box-sizing: border-box;
        height: @height;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        text-decoration: none;
        padding-left: 20px;
        padding-right: 1px;
        margin-right: 20px;
        background: transparent url('images/sprites.png') no-repeat -5px -164px;
        border: 0;
        position: relative;
        outline: none;
        cursor:pointer;
        overflow: visible;
    }

pom.xml 文件包含以下条目:

<repository>
    <id>releases</id>
    <name>Releases</name>
    <url>https://oss.sonatype.org/content/repositories/releases</url>
</repository>   (Inside <repositories> tag)

<dependency>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-core</artifactId>
    <version>1.6.2</version>
</dependency>  (Inside <dependencies> tag)

<plugin>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-maven-plugin</artifactId>
    <version>1.7.3</version>
    <configuration>
    <targetGroups>base</targetGroups>
        <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
        <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/resources/css/test/</cssDestinationFolder>
        <wroFile>${basedir}/src/main/webapp/WEB-INF/wro.xml</wroFile>
        <extraConfigFile>${basedir}/src/main/webapp/WEB-INF/wro.properties</extraConfigFile>
        <contextFolder>${basedir}/src/main/webapp/</contextFolder>
        <ignoreMissingResources>false</ignoreMissingResources>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>run</goal>
            </goals>
            <phase>prepare-package</phase>
        </execution>
    </executions>
</plugin>  [Inside <build> <plugins> tag.] 

我没有在我的 eclipse IDE 中安装 m2e-wro4j 插件。

基于上述内容,我假设当我从命令提示符 [mvn clean install] 进行 maven 构建时,应该在/resources/css/test/文件夹中创建一个名为 base.css 的 css 文件。我可以在展开的元素 WAR 文件中看到新文件夹“test”,但它不包含 base.css 文件。控制台输出看起来像这样:

[INFO] Wro4j Model path: C:\workspace\{projectname}\src\main\webapp\WEB-INF\wro.xml
[INFO] targetGroups: base
[INFO] minimize: true
[INFO] ignoreMissingResources: false
[INFO] parallelProcessing: false
[INFO] destinationFolder: C:\workspace\{projectname}\target
[INFO] jsDestinationFolder: null
[INFO] cssDestinationFolder: C:\workspace\{projectname}\target\{WAR file name}\resources\css\test
[INFO] groupNameMappingFile: null
[INFO] wroManagerFactory class: ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
[INFO] The following groups will be processed: [base]
[INFO] folder: C:\workspace\{projectname}\target\{WAR file name}\resources\css\test
[INFO] processing group: base.css
[INFO] folder: C:\workspace\{projectname}\target
[INFO] processing group: base.js 

再观察一次。为了确保 wro.properties 文件被正确放置并被插件拾取,我在这个文件 [postProcessors=less4jtttt] 中尝试了一些错误的值,并且在构建时可能会看到异常。但是,wro.xml 文件中的无效文件路径不会引发任何异常。

最佳答案

虽然答案也发布在邮件列表中,但我也会将其发布在这里以提高可见性:

我已设法在本地重现您的测试用例,但我看到的是一个空文件。第一印象是有问题,但实际上这是预期的行为。 处理的内容越少,定义了一个 mixin,只要它不被使用,它就不会产生任何输出。

要获得有效的输出,请更新您的 less 以使用该 mixin:

div.expandable {
    .btn-expand()
}  

关于css - Wro4j:从 LESS 文件生成 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21522869/

相关文章:

java - wro4j 和浏览器缓存

php - 媒体查询在 WordPress 中不起作用

html - 导航与 IE 8 不兼容

less - 仅使用 less 样式表的一部分

css - LESS.app 以 100% 的 CPU 使用率运行

maven - 我可以在 Maven 中推迟执行插件后的资源过滤吗?

java - Spring MVC 4 targetBeanName NoSuchBeanDefinitionException

javascript - 用于更改背景的 ajax 脚本在 IE 中不起作用

php - 检查 session 用户是管理员还是简单

php - lessphp 解析传入变量错误失败