如何跨项目重用 .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",您会发现如下有趣的信息:
- Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015
- Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
一旦你习惯了,你会做很多事情,比如复制、编译、转换、连接、缩小、生成地图等,因为这个任务运行ner有很多功能齐全,使用起来真的很方便。
注意:它基于 npm,它以与 Nuget 类似的方式使用包,因此您将获得与使用 Nuget 相同的优势,但用于前端工件。 npm 中有许多可用的软件包,而您在 Nuget
中找不到
我目前正在从事一个基于网络的项目,我们有一个公司品牌风格,它通过生成 .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",您会发现如下有趣的信息:
- Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015
- Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
一旦你习惯了,你会做很多事情,比如复制、编译、转换、连接、缩小、生成地图等,因为这个任务运行ner有很多功能齐全,使用起来真的很方便。
注意:它基于 npm,它以与 Nuget 类似的方式使用包,因此您将获得与使用 Nuget 相同的优势,但用于前端工件。 npm 中有许多可用的软件包,而您在 Nuget
中找不到