如何跨项目重用 .less 和生成的 CSS?

How to re-use .less and generated CSS across projects?

我目前正在从事一个基于网络的项目,我们有一个公司品牌风格,它通过生成 .css.less 文件覆盖 Bootstrap 的默认颜色和风格] 用于样式表。

我花了很多精力来制作这个 .less 文件,并希望在多个项目中重复使用它,但也允许它在一个位置进行更新,而不需要复制.less 并为每次更新生成 .min.css.css

我尝试在 VS2013 中使用 "Add existing item" 链接每个工件,但是当 Web 应用程序项目为 运行.

时文件不可用

有谁知道我将如何配置 project/file 链接,以便不必在项目之间复制文件和更新多个文件?

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

但是,您迟早会在您的网络项目中使用 G运行t。这是一项 运行ner 任务,这些任务包括复制文件、将 less 编译为 css、缩小等等。这广泛用于管理应用程序的前端组件,特别是 css 和 js.

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

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

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

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

如果您在 Visual Studio 图库中寻找 G运行t,您至少会找到 "Grunt launcher" 可以轻松地 运行 从 [=58] 中完成此任务=].在 VS 2015 中,您可以使用 Web Essentials(它可能是本机功能,但我不确定)。还有"Task Runner Explorer"(见下面最后的link)。

如果您 google "visual studio grunt",您会发现如下有趣的信息:

一旦你习惯了,你会做很多事情,比如复制、编译、转换、连接、缩小、生成地图等,因为这个任务运行ner有很多功能齐全,使用起来真的很方便。

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

中找不到