css - 如何跨元素重用 .less 和生成的 CSS？

Question

我目前正在做一个基于网络的元素，我们有一个企业品牌风格，它通过生成 .css 的 .less 文件覆盖 Bootstrap 的默认颜色和样式> 用于样式表。

我投入了大量精力来制作这个 .less 文件，并希望在元素中重复使用它，但也允许它在一个位置进行更新，而不是需要复制 .less 并为每次更新生成 .min.css 和 .css。

我已尝试在 VS2013 中使用“添加现有元素”链接每个工件，但在运行 Web 应用程序元素时该文件不可用。

有谁知道我将如何配置元素/文件链接以便不必在元素之间复制文件和更新多个文件？

Answer 1

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

但是，您迟早会在 Web 元素中使用 Grunt。它是一个任务运行器，任务包括复制文件、将 less 编译为 css、缩小等等。这广泛用于管理应用程序的前端组件，特别是 css 和 js。

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

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

• 一个copy任务，从中央位置复制文件。这是可选的，但建议您 @import你的全局色彩.less每个应用程序的特定 LESS 文件中的文件
• 一个less任务，编译 .less文件到.css

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

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

如果你用谷歌搜索“visual studio grunt”，你会发现像这样的有趣信息:

• > Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015
• > Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

一旦你习惯了，你会做很多事情，比如复制、编译、转换、连接、缩小、生成 map 等。因为这个任务运行器有很多功能，而且真的很容易使用。

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