I have a LESS file that when saved ONLY updates the non-minified css file. No matter what I do it will not update the min file. I can of course minify the main via web essentials, but that sort of negates the function of compiling LESS on save...
There is no error or anything - it just happily ignores the min.css file. In VS2012 it works perfectly.
Does anyone have any idea of what to do about this?
/Erik
It can be done via setting: Tools -> Options -> Web Essentials -> LESS.
I found the answer here - How to ignore certain LESS files in Web Essentials LESS compiling? (Bootstrap)
Update:
This option must be set on CSS, see screenshot:
After this when you save LESS it will create a .min.css file too.
Related
I'm running JetBrains ReSharper 8.2 on a project that uses SASS for styling.
I compile my seperate scss files into one file "common.css". This file is not included in the project, but gets compiled on build on the server (grunt + compass takes care of this).
I don't want to include this file, but only my SCSS files in the project. This however causes ReSharper to report a lot of errors ("Unknown CSS class"...) in my views because the file isn't included.
Is there a workaround for this (without disabling css errors in settings)?
I've tried the "ReSharper.ExternalCode" extension (https://resharper-plugins.jetbrains.com/packages/ReSharper.ExternalCode), but without any luck.
Sadly, there isn't a workaround for this. ReSharper doesn't know about SCSS files, and doesn't know anything about files that aren't included in the project, so it can only assume the CSS classes are undefined.
The external code plugin should work and allow ReSharper to process the resulting css file. However, I'm not sure how flexible it is - I think it needs everything to be configured before the solution is opened. That is, it only tells ReSharper about the generated file when the solution is being opened. Configuring things while a solution is open probably won't be reflected immediately (but I haven't tried it). Similarly, it doesn't notify ReSharper of changes to the file, and I don't think that ReSharper sets up any monitoring. So if the file isn't available when the solution opens, or changes while it's open, ReSharper won't have correct information. I'd try and configure it, close the solution and reopen.
TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.
Problem explanation
I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.
This is what I'm using:
I'm using Visual Studio with Web Essentials addin to have support for LESS files
I'm writing LESS files and have Web Essentials addin automatically minify files on save
I'm also using bundling and minification in my project
When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together
Nothing unusual here so far, but it doesn't work.
What seems to be the problem?
The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.
This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.
Workarounds
Always provide absolute paths in LESS files
Disable file minification on save in Web Essentials settings
Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.
From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.
Question
Is it possible to somehow convince bundling and minification to either:
not use existing minified file versions
run transformations over existing minified versions
Have you considered using Grunt? http://gruntjs.com/
It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.
I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.
With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.
I have never used LESS or web essentials, so please take this post for what it is worth (not much.) Could you add a pre-build command to simply delete the old files, then do a rebuild when you need to update the CSS.
I've set up Web Essentials 2013 (in Visual Studio 2012) and loaded in the default Twitter Bootstrap LESS source files. Auto-build and minification is working perfectly, except Web Essentials quite overdoes the job. When I select "bootstrap.less", make a change and save it, Web Essentials creates a new "bootstrap.css" as well as a "bootstrap.min.css" with everything inside I need. But when I edit e.g. buttons.less, it creates a buttons.css (and buttons.min.css) too (with all the includes and mixins). Which means, in fact, I'll have nearly the same css files over and over again under different names.
Can I declare certain files to be ignored on save?
There is a convention in Web Essentials that if the name of your less file starts with an underscore (like _utils.less) it will not be compiled to css on save.
https://webessentials.uservoice.com/forums/140520-general/suggestions/3319359-don-t-compile-nested-less-files
Okay, I figured it out.
What I initially wanted was LESS compilation on build, Web Essentials was so kind to do this on save. To deactivate this, in Visual Studio 2012 head over to Tools -> Options -> Web Essentials -> LESS and deactivate "Generate CSS file on save".
According to the Visual Studio Extension page for Web Essentials, minification on build works not by now, but will on future releases. I have to delete the .min.css files by myself and create it again on every build as it seems. :(
Pro-tip for every dev:
If you use any framework, tools, extensions etc. and your new super-powers don't work as expected, don't blame the extension, shut up and do it yourself.
Although what #corvuscorax says is absolutely true what I do (if you don't like the idea of starting your file names with an underscore) is to create a folder starting with a #
This seems to stop webessentials from compiling your less.
Note that Visual Studio won't let you create a folder with a starting hash so you will have to create it using your Windows Explorer and then add it to your project via visual studio.
For ignoring only files, you can use underscore at the file name.
Web Essentials has an internal convention whereby files beginning with an underscore will not be saved to CSS.
This is actually quite useful. You don’t want your variables.less or mixins.less files being saved as variables.css or mixins.css. So in this case, name them _variables.less and _mixins.less. They will be compiled (and thus checked for correct syntax) but won’t take up space on disk or in source control as redundant CSS files.
https://medium.com/#brendaningram/web-essentials-not-saving-css-files-a450b8c2d23a
There is a way to keep your filenames and prevent WebEssentials from compiling your LESS at the same time. Create .weignore file with filenames or masks for ignored files as described in the docs.
I was hoping to find a way to create my css files from my less files using web essentials or something of the sort. When create a new less file it will create the css to match, however on some of my older files I removed the css files permanently and I am looking to readd them.
grunt-contrib-less is a great solution for continuously converting LESS to CSS, as is assemble-less (I'm a maintainer of the latter).
So I was able to answer my own problem. When using VS2012 Web Essentials your .less file will not compile and create the matching .css and .min.css if errors exist. My errors were occurring because some of my variables were not recognized due to the fact that I wasn't dragging in the #import of the my .less file that contained these variables. I took a quick look at the libraries you mentioned and they did look pretty cool. Thanks for the answer.
It's important to say that if you installed the Web Essentials plug-in you must restart the Visual Studio, otherwise the .min.css and .css will not be generated, either.
I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/