我目前正在开展一个基于网络的项目,我们有一个企业品牌风格,通过.less
文件覆盖Bootstrap的默认颜色和样式,生成.css
for样式表。
我已投入大量精力制作此.less
文件,并希望在项目中重复使用它,但也允许它在一个位置更新,而不是需要复制.less
并为每次更新生成.min.css
和.css
。
我尝试使用"添加现有项目"来链接每个工件。在VS2013中,但在运行Web应用程序项目时该文件不可用。
有没有人知道如何配置项目/文件链接,以便不必在项目之间复制文件并更新多个文件?
答案 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中找不到