1

I'm currently working on a web-based project where we have a corporate branding style which overrides Bootstrap's default colours and styles via a .less file generating the .css for the stylesheet.

I've put a large amount of effort into making this .less file and would like to re-use it across projects but also allow it to be updateable in a single location rather than needing to copy the .less and generated .min.css and .css for each update.

I've tried linking each of the artifacts using "Add existing item" in VS2013 but the file is not available when the Web Application project is run.

Does anyone know how I would configure the project/file links in order to not have to copy the file between projects and update multiple files?

toadflakz
  • 7,764
  • 1
  • 27
  • 40

1 Answers1

1

The easiest way to share variables, mixins, and other LESS elements, is to use @import. If the external shared elements are in an accesible path, you can directly specify the whole path in the @import clause.

However, sooner or later you'll use Grunt in your web pojects. It's a task runner, and the tasks are things like copying files, compiling less to css, minifying, and so on. This is widely use to manage the front end components of your application, specially css and js.

In your particular case, you could use grunt to copy the less file from the central location, and then run a less task to generate the final css, .min.css and, if you want it the corresponding .css.map, which is really useful to debug the styles from the browser's console.

If you want to use grunt for this case, basically you have to create two grunt tasks:

  • a copy task, to copy the file from the central location. This is optional but advisable if you @import your global colors .less file in each applciation's particular LESS file
  • a less task, that compiles the .less files into .css

The tasks definition is done in a simple json file, packages.json, and a js file, gruntfile.js. Althoug it can seem daunting, you can have it up an running in a few hours.

If you look for Grunt in Visual Studio Gallery you'll at least find "Grunt launcher" that allows to easyly run this tasks from within Visual Studio. In VS 2015 you can use Web Essentials (and it's probably a native functionality, but I'm not sure). There is also the "Task Runner Explorer" (see the last link below).

If you google "visual studio grunt", you'll find interesting info like this:

Once you get used to it, you'll do a lot of things, like copying, compiling, transplining, concatenating, minifying, generating maps, etc. because this task runner has a lot of functionalities, and it's really easy to use.

NOTE: it's based on npm, which uses packages, in a similar fashion to Nuget, so you'll get the same advantages of using Nuget, but for front end artifacts. There are many packages available in npm which you will not find in Nuget

JotaBe
  • 38,030
  • 8
  • 98
  • 117
  • Thanks. I actually saw the `@import` directive for the first time recently and am thinking this is how I could probably easiest manage the `.less` centrally. – toadflakz Nov 03 '15 at 11:04
  • I've updated the answer to make clear that you can use @import. I don't know if you'll find the same problem, but I moved from Web Essentials to grunt because the compiler used by web essentials was outdated, and there were many things that failed when trying to compile. I don't remember exactly what, but part of the problem had to do with `@import` (I don't even know if you're using Web Essentials or something else for your less compilations). – JotaBe Nov 03 '15 at 11:40