Dotless - 不能在MVC捆绑的单独文件中引用较少的变量。

问题描述 投票:9回答:2

希望我没有建立一个重复的话题,但是我找了两天都没有找到解决的办法。

我们正在启动一个新项目,在 MVC4 而我们有少版的 引导性 加载。 我遇到的问题是,当我试图引用在 bootstrap.less我的 global.less或当前文件之外的任何东西。 我可以在当前文件的顶部创建一个变量,然后使用它就可以了,但是如果我想使用一个单独的文件之外的东西,我必须要 @import 它。 如果我的整个app的少是在一个文件中,这将是很好的,但我必须@导入4个以上的文件到我创建的每个pageection少文件中。

我添加了MVC4捆绑的附加功能,从 https:/gist.github.com2002958

我看到的问题是,每个文件都被独立地评估和转换为css。 我试着简化这个过程,从less bundle中的所有文件中建立一个巨大的less字符串,然后将它们转换为css (Less.Parse(lessString)),但我得到的错误信息是:

"你正在导入一个以.less结尾的文件,无法找到"

所以我的终极问题是。有没有一种方法可以简单地解析一个较小的字符串 而不需要引用一个物理文件? 这将解决我的问题。

如果因为一些奇怪的原因而无法实现,那么是否已经有一个我不知道的组件或流程,在对文件进行压缩之前将它们捆绑在一起?

任何关于这个问题的信息都将被感激,因为我正在兜圈子,试图让这个工作。

这个问题也被发布在Dotless群里。https:/groups.google.comforum?fromgroups#!topicdotlessj-8OP1dNjUY。

c# less bundling-and-minification dotless
2个回答
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 mixins and variables,
   so importing bootstrap and extending happens here: */
@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
投票

你有没有调查过 LESS 捆绑式变压器?

© www.soinside.com 2019 - 2024. All rights reserved.