无点 - 无法使用MVC Bundling在单独的文件中引用较少的变量

时间:2012-11-15 17:54:50

标签: c# less bundling-and-minification dotless

我希望我不会创建一个重复的主题,但我已经搜索了两天,但找不到解决方案。

我们正在 MVC4 开始一个新项目,我们加载的 bootstrap 版本较少。我遇到的问题是当我尝试在bootstrap.less,我的global.less或当前文件之外的任何内容中引用某些类或变量时。我可以在当前文件的顶部创建一个变量并使用它,但如果我想使用单独的文件,我必须@import它。如果我的整个应用程序在一个文件中较少,那就没问题了,但是我必须将@import 4+文件添加到我创建的每个页面/部分文件中。

我从https://gist.github.com/2002958

添加了MVC4捆绑添加

正如我所看到的那样,问题是每个文件都被评估并独立转换为css。我尝试简化过程并从less bundle中的所有文件构建一个较少的字符串然后转换它们(Less.Parse(lessString)),但我收到错误:

  

“您正在导入以.less结尾的无法找到的文件”

所以这是我的终极问题:如果没有引用物理文件,有没有办法简单地解析一个较少的字符串?这将解决我的问题。

如果出于某种奇怪的原因这是不可能的,是否有一个我不知道的组件或过程实际上将文件捆绑在一起然后缩小它们?

关于这个问题的任何启示都会受到赞赏,因为我正在试图让它发挥作用。

此问题也发布在Dotless小组中:
https://groups.google.com/forum/?fromgroups#!topic/dotless/j-8OP1dNjUY

2 个答案:

答案 0 :(得分:3)

这个解决方案对我有用:
我有两个nuget包:
dotless
dotless adapter for system.web.optimization

web.config我有这条线

<configuration>
    <configSections>
        <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
    </configSections>
    <system.web>
        <httpHandlers>
            <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />
        </httpHandlers>
    </system.web>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false" />
        <handlers>
            <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
        </handlers>
    </system.webServer>
    <dotless minifyCss="true" cache="true" web="false" disableParameters="true" />
</configuration>

请注意,您应该根据需要定义无点参数。

BundleConfig.cs中的

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new LessBundle("~/bundles/styles/").Include(
        "~/Content/site.less"
    ));
    BundleTable.EnableOptimizations = True; //false if you want to debug css
}

和最终Site.less

/*i have to redefine some bootstrap mixin and variables, so importing bootstrap and extending happings there*/
@import "bootstrap-extends.less";

/* all other needed less should be included here too
   for example:
   @import "admin.less";
   @import "controls.less";
   etc
*/

body{

}

site.lessbootstrap-extends.less位于内容文件夹中 bootstrap-extends包含所有必需的@import指令,这些指令通常列在~/Content/bootstrap/bootstrap.less

我希望这有帮助

答案 1 :(得分:1)

您是否查看了LESS bundle transformer