logo标签列表

Visual Studio - 预编译 - dotless

asp.net-mvcvisual-studio-2008lessdotless
26

我想知道是否有一种方法可以在Visual Studio中预编译*.less文件(http://www.dotlesscss.org/)。

该网站提供了一个dotless.compiler.exe，但我不确定如何将其与Visual Studio连接起来。我正在寻找Webforms和ASP.NET MVC的解决方案。

7个回答
20

根据您的构建环境，您可以将dotless.Compiler.exe作为构建任务启动。

例如，在Visual Studio中使用Pre-Build任务（一行代码）：

$(SolutionDir)Tools\dotLess\dotless.compiler.exe -m 
    $(ProjectDir)content\css\site.less $(ProjectDir)content\css\site.css

宏变量（如$(SolutionDir)等）允许项目和文件位置有一定的灵活性。与其使用标准的.less文件，在您的标记中直接引用新的.css文件即可。
一定要全部写在一行，否则会出现 MS Build 错误。命令执行时返回了 -1。 - Sakthivel
关于可移植性：不要忘记将命令的每个参数用引号括起来，因为构建任务是作为批处理文件执行的，而批处理无法处理目录名称中的空格。例如："$(ProjectDir)..\..\..\..\lib\dotless\tool\dotless.compiler.exe" "$(ProjectDir)Styles\Home.less" "$(ProjectDir)Styles\Home.css" - ViRuSTriNiTy
7

大家好，

在使用了这里讨论的几乎所有备选方案都不满意之后，我为Visual Studio编写了一个LessCss编译器插件。它可以接收.less文件，并只在.less文件更改时生成.css文件。它使用最新和最好的less.js编译器。

点击此处查看使用情况。

下载签名扩展。

源代码在这里。

我刚刚将其提交到VS扩展库中。希望它很快就能上线，但在此期间，请安装（或编译然后安装）并试用一下。

我看了这个视频，它看起来正是我要找的东西。但是我无法安装它。安装程序似乎可以工作，但它没有出现在Visual Studio中。你知道为什么会发生这种情况吗？ - jpbochi
1
顺便问一下，在 VS 扩展库中有批准吗？我在那里找不到它。 - jpbochi
我现在成功安装了。我按照这个链接的步骤进行：http://msdn.microsoft.com/en-us/library/ee814429.aspx，但我不确定它是否解决了问题。 - jpbochi
嘿，感谢您安装它。我已经提交到VS画廊，但从未收到回复。我会再试一次。 - Steve Potter
@Steve Potter，我安装了你的插件，但在我的.less文件的属性窗口中，我没有看到“LessCss”选项和自定义工具。 - user1240155
3
这是我使用MSBuild想出的解决方案。它是增量的，所以只有在Less更改时才会发生。它还可以正确处理@import。
首先，使用NuGet将dotless添加到您的项目中。您不需要它添加到您的web.config中的任何魔法，因此您可以还原它-您只是使用它来获取编译器可执行文件。
接下来，像这样将您的“根”Less文件添加到您的.csproj中：
<ItemGroup>
    <LessCssRootInput Include="example.less" />
</ItemGroup>

最后，在您的.csproj底部添加以下代码片段：
<ItemGroup>
    <LessCssSubInput Include="**\*.less" Exclude="@(LessCssRootInput)" />
    <LessCssOutput Include="@(LessCssRootInput -> '%(RelativeDir)\%(Filename).css')" />
</ItemGroup>
<Target Name="CompileLessCss" BeforeTargets="Compile" Inputs="@(LessCssRootInput);@(LessCssSubInput)" Outputs="@(LessCssOutput)">
    <Exec Command="&quot;$(SolutionDir)\packages\dotless.1.3.1.0\tool\dotless.compiler.exe&quot; --minify --keep-first-comment @(LessCssRootInput)" />
</Target>
它是否自动包含项目文件？还是我仍然需要显示所有文件，然后手动包含生成的文件？请回答，谢谢！ - fiberOptics
你不需要告诉它关于仅从其他文件中包含的Less文件。这些文件将通过“***.less”模式自动包含。但是，您需要告诉它有关执行包含操作的“根”Less文件（在LessCssRootInput中）。它将为每个“根”Less文件生成一个CSS文件。 - Ben Challenor
2
在dotless 1.6.7包中，没有带有二进制文件（exe）的tools文件夹。 - Erik Melkersson
我已经在我的VS2017的csproj中添加了这个。但它是如何工作的？它是否会在保存时自动编译less文件更改，还是其他什么方式？请进一步解释。 - Har devgun
3
3
T4模板现已成为dotless项目的一部分，并在每次提交时由buildserver生成（Phil的模板现已过时）。您可以通过单击我们网站http://www.dotlesscss.com上的下载按钮，从dotless buildserver获取最新的t4css。 - Tigraine
2

在开发过程中，还有另一种预编译的方法。

dotless项目提供了一个命令行编译器（dotless.Compiler.exe），可以编译和压缩CSS。

您还可以使用compiler.exe和--watch参数，它将持续运行并扫描输入文件以进行更改，每当您更改文件时重新生成。这样，您就不再依赖于Visual Studio。

这就是为什么我们编写了该功能。我们收到了太多来自PHP开发人员的问题，他们很想使用dotless，但并不关心所有与.NET相关的内容。而且，与Ruby相比，dotless只有一个exe和一个dll。 - Tigraine
2
2
您可能想要看一下Chirpy。它不仅支持LESS，还有更多的支持。我希望在编写自己的工具之前能够找到它。
说到这个，我还编写了一个Visual Studio自定义构建工具，使用JS文件（而不是.NET端口）执行。您可以在这里查看源代码：https://github.com/paultyng/JsBuildTools 或者也可以在扩展程序库中找到JsBuildTools。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接