Combres 和 DotLessCssFilter

Question

好吧，短期内我无法让它发挥作用。该过滤器似乎无法自行应用。

我正在尝试让梳子与我的 MVC 3 剃须刀应用程序一起使用。除了 DotLessCssFilter 之外，我已经完成了所有工作。

在文档中它说为了将过滤器应用于您的资源集，您需要修改您的Combres配置文件

我已经修改了combres.config，如下所示：

<combres xmlns='urn:combres'>
    <filters>
        <filter type="Combres.Filters.DotLessCssFilter, Combres" acceptedResourceSets="dotLessCss" />
    </filters>
    <resourceSets url="~/combres.axd" defaultDuration="30" defaultVersion="1" defaultVersionGenerator="Combres.VersionGenerators.Sha512VersionGenerator">
        <resourceSet name="siteCss" type="css">
            <resource path="~/UI/Styles/1140.css" />
            <resource path="~/UI/Styles/typeimg.css" />
            <resource path="~/UI/Styles/layout.css" />
        </resourceSet>
        <resourceSet name="siteJs" type="js">
            <resource path="~/UI/Scripts/opt/util.js" />
            <resource path="~/UI/Scripts/opt/core.js" />
        </resourceSet>
    </resourceSets>
</combres>

它组合了文件并缩小为它应该。

在我的一个文件中，我有一个简单的 less-syntax：

@sprite: url(/ui/styles/sprite.png);

.foo {
  background-image: @sprite;
}

但它似乎从未通过过滤器。

不知道这是 MVC 问题还是一般问题。

有人成功使用过这个过滤器吗？

没关系！ （编辑）

查看答案

Answer 1

错过了 acceptedResourceSets="dotLessCss" 它需要有正确的资源集名称，所以在我的例子中：

acceptedResourceSets="siteCss"

Answer 2

除非您愿意，否则您实际上并不需要拥有 AcceptedResourceSets。

以下是我作为 POC 所做的测试项目中的示例 Combres.xml 文件（请参阅注释）：

<?xml version="1.0" encoding="utf-8"?>
<combres xmlns="urn:combres">
  <filters>
    <!-- This filter allows relative urls to be used in Css files like in .NET; e.g. "~/MyFolder/MyPic.png"-->
    <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
    <!-- This filter allows you to define variables in a CSS file and reuse them throughout the file. -->
    <filter type="Combres.Filters.HandleCssVariablesFilter, Combres" />
    <!-- This filter changes Combres order of ops so that common css variables can be defined in a single
         file and used throughout multiple css files, instead of having to define them in each file. -->    
    <filter type="Combres.Filters.DotLessCssCombineFilter, Combres" />
  </filters>
  <resourceSets defaultDebugEnabled="false" 
                defaultDuration="30" 
                defaultIgnorePipelineWhenDebug="true" 
                defaultVersion="auto" 
                localChangeMonitorInterval="30" 
                remoteChangeMonitorInterval="60" 
                url="~/combres.axd">
    <resourceSet name="siteCss" type="css">
      <resource path="~/content/Variables.css" />
      <resource path="~/content/Test1.css" />
      <resource path="~/content/Test2.css" />
      <resource path="~/content/Site.css" />
    </resourceSet>
    <resourceSet name="siteJs" type="js">
      <resource path="~/scripts/jquery-1.7.1.min.js" />
      <resource path="~/scripts/jquery-ui-1.8.17.min.js" />
      <resource path="~/scripts/jquery.unobtrusive-ajax.min.js" />
      <resource path="~/scripts/modernizr-1.7.min.js" />      
    </resourceSet>
  </resourceSets>
</combres>

Variables.css：

@sprite: url('~/Content/ui/styles/sprite.png');

Test1.css：

.fooTest1 {背景图像：@sprite;}

Test2.css:

.fooTest2 {background-image: @sprite;}

输出（通过 Firebug .NET 选项卡）：

.fooTest1{background-image:url("/Content/ui/styles/sprite.png")}.fooTest2{background-image:url("/Content/ui/styles/sprite.png")}

我认为在您的示例应用程序中，您甚至不需要注册 DotLessCssFilter 而应该只注册 HandleCssVariablesFilter。

然后，您可以在每个 css 文件中定义 css 变量（不重复使用）。

但是，如果您想在多个文件之间定义和共享 css 变量，请像我上面那样设置过滤器注册，效果就像一个魅力。

Buu Nguyen 在 Combres 项目上做得非常出色。