如何在项目中重复使用.less并生成CSS?

时间:2015-10-23 09:09:52

标签: css visual-studio-2013 less web-essentials web-application-project

我目前正在开展一个基于网络的项目,我们有一个企业品牌风格,通过.less文件覆盖Bootstrap的默认颜色和样式,生成.css for样式表。

我已投入大量精力制作此.less文件,并希望在项目中重复使用它,但也允许它在一个位置更新,而不是需要复制.less并为每次更新生成.min.css.css

我尝试使用"添加现有项目"来链接每个工件。在VS2013中,但在运行Web应用程序项目时该文件不可用。

有没有人知道如何配置项目/文件链接,以便不必在项目之间复制文件并更新多个文件?

1 个答案:

答案 0 :(得分:1)

共享变量,mixins和其他LESS元素的最简单方法是使用@import。如果外部共享元素位于可访问路径中,则可以直接在@import子句中指定整个路径。

但是,迟早你会在网络项目中使用Grunt。它是一个任务运行器,任务就像复制文件,编译较少的css,缩小等等。这广泛用于管理应用程序的前端组件,特别是css和js。

在您的特定情况下,您可以使用grunt从中心位置复制较少的文件,然后运行较少的任务来生成最终css.min.css,如果您需要,相应的.css.map,这对于从浏览器的控制台调试样式非常有用。

如果你想在这种情况下使用grunt,基本上你必须创建两个grunt任务:

  • copy任务,从中心位置复制文件。这是可选的,但如果您在每个applciation的特定LESS文件中@import使用全局颜色.less文件,则这是可选的
  • less任务,将.less个文件编译为.css

任务定义在一个简单的json文件packages.json和一个js文件gruntfile.js中完成。虽然它看起来令人生畏,但你可以在几个小时内完成运行。

如果你在Visual Studio Gallery中寻找Grunt,你至少会找到“Grunt启动器”,它允许从Visual Studio中轻松运行这些任务。在VS 2015中,您可以使用Web Essentials(它可能是本机功能,但我不确定)。还有“Task Runner Explorer”(见下面的最后一个链接)。

如果你谷歌“visual studio grunt”,你会发现这样的有趣信息:

一旦你习惯了它,你会做很多事情,比如复制,编译,发布,连接,缩小,生成地图等等,因为这个任务运行器有很多功能,而且很容易使用

注意:它基于npm,它以与Nuget类似的方式使用包,因此您将获得使用Nuget的相同优势,但对于前端工件。 npm中有许多软件包,你在Nuget中找不到