well, I was quite surprised when installing Web Essentials 2015 for Visual Studio 2015 that it didn't include a less compiler anymore:
"Web Essentials 2015 no longer contains features for bundling and minifying of JS, CSS and HTML files as well as compiling LESS".
Everything worked fine before with Visual Studio 2013. So I downloaded Web Compiler 2015, as it is the new compiler from Mads Kristensen. But, after adding all the needed files to be compiled to the compilerconfig.json, I have an error on compilation that it doesn't recognize my variables anymore nor my mixins!
Here's my site.less:
/* Colors and common variables */
#import "Colors";
#import "Variables";
/* Reseting default values for all internet browsers */
#import "Reset.css";
/* BootStrap */
#import "../../../Content/bootstrap/bootstrap.less";
/* Basic mixins */
#import "mixins/Generic_Mixin.less";
#import "mixins/Controls.less";
#import "mixins/Images.less";
#import "mixins/Navigation.less";
#import "mixins/Text.less";
/* Website specific classes */
#import "Controls.less";
#import "Footer.less";
#import "Header.less";
#import "Images.less";
#import "Text.less";
#import "combobox.less";
#import "Sitemaster.less";
And here's one of my many errors :
variable #font-size-base is undefined on line 49 in file
'C:\Users\(...)\Site.WebApp\App_Themes\Default\Styles\mixins\Variables.less':
Please, I don't understand anything to all of this, anyone would have an answer for me ? Thx.
I had the same problem. Web Compiler failed in many ways and the workarounds were messy and wouldn't have been easy to support. Future versions of Web Compiler might be useful, but I came to the conclusion that it's worth the trouble to just switch to a more mature less compiling tool.
This is what worked for me:
Disable Web Compiler
Tools->Extensions and Updates->Installed(search for Web Compiler)->Disable
Then setup Grunt.js by following one of the many tutorials out there. I used this one by Scott Hanselman:
http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx
Here's another guide I found very useful:
https://www.orderfactory.com/articles/Bootstrap-LESS-Grunt-VS.html
Since it sounds like you were basically where I was before I followed these instructions, there's a chance you might run into another issue with TypeScript compiling, which Web Compiler turned on by default.
If you get a bunch of "duplicate identifier" errors related to lib.core.d.ts, you may have to disable automatic typescript compiling:
right-click Project->Properties->TypeScript Build->uncheck "Compile on save"
Installing Web Compiler and setting up node tools and assigning an automated task can result in unleashing the ts compiler to run through all the node_modules, looking for things to compile. It can be a mess.
If you want to leave TypeScript compiling on build, you'll need to add a tsconfig.json file to the root of your project to define specific file paths. Without this file, the compiler looks everywhere and you really don't want that. I found it easier to just disable it.
Here's more information on that:
Typescript, confusing "duplicate identifier" error message
Hope this helps.
Related
I have VS 2012 Premium Update 4 with the recently released (25 Feb 2014) Web Essentials 3.7 for compiling LESS files.
I'm customizing (Twitter) Bootstrap frontend framework by adding my own custom LESS-files to the compilation process:
I have this folder structure:
main-file.less
bootstrap/
less/
[all bootstrap .less files]
custom/
custom-mixins.less
custom-other.less
custom-variables.less
In main-file.less I have:
#import "bootstrap/less/bootstrap";
#import "bootstrap/custom/custom-variables";
#import "bootstrap/custom/custom-mixins";
#import "bootstrap/custom/custom-other";
It appears to make no difference whether I apply the ".less" extensions in the import directives or not.
When compiling main-files.less, I keep getting errors like:
variable #my-label-color is undefined
variable #grid-gutter-width is undefined
Any ideas for what might be wrong?
Sounds like the import order is incorrect. Find out where those variables are defined and make sure that file is imported before the file where the variables are used.
Update
As correctly stated by seven-phases-max variables can be defined after they are used. Therefore more than likely you are using these two variables without actually assigning a value to them or defining them.
It maybe they are defined in a less file which you have not imported. Check where these variables are defined and ensure they are in main-files.less
I've been using Typescript 0.9.5 for the last few days, and then suddenly today the JavaScript files just stopped being generated. I see an error "Output generation failed" in the Visual Studio status bar, but nothing in any of the output windows.
I've rebooted, and restarted Visual Studio, disabled Web Essentials, tried all the usual things.
The files are set as TypescriptCompile in the properties. I've tried adding new files, or editing old ones with no effect. The Project file hasn't been changed as far as I can tell (its in TFS and none of the TypeScript sections have been altered).
I've made sure both files are checked out, still nothing.
Update: I've managed to compile manually using tsc.exe from the command line, so it must be something in Visual Studio.
OK, so I solved the problem.
One of my files contained invalid typescript, specifically trying to export a class when not inside a module. This caused all typescript files to fail to generate, but with no useful error message.
The following file would cause the problem:
export class Test {
public DoSomething() {
}
}
Either removing the export keyword, or adding a wrapping module solved the problem.
I've raised it as an issue here: https://typescript.codeplex.com/workitem/2109
Update: More details.
The above syntax is valid if you are using the CommonJS or AMD module patterns.
To enable this in visual studio you need to edit the .csproj file and insert a new PropertyGroup:
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
If you have an export outside of an internal module Typescript tries to compile it as either commonjs or amd module format. The compilation will fail if the a --module flag is not present on the command line. Use your project properties to set it to the desired value (probably amd in your case).
More info on TypeScript modules : http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1
For better organization, I have a main .less file that imports other .less files using the #import syntax. In order for the Web Essentials Preview window to work I also have #import-once at the top of each .less file that imports the variables.less file.
This solution worked wonderfully until I upgraded to Web Essentials 2.8. Now I'm unable to import any .less file that has #import or #import-once declared in it. My main .less file no longer compiles.
If I remove the #import-once statements, the preview window is useless since I can't see the compiled CSS without importing my variables file.
I also had a case where I imported a .less file into a ruleset, as defined by lesscss.org in the Importing into ruleset section. This also no longer works since the upgrade to v2.8.
Has anyone else experienced these issues or have a resolution?
Thanks
This seems to be a bug -> Feature in the latest version of the WebEssentials because of a new feature in Less 1.4.0. as Anwar describes. See the changelog of Less:
1.4.0 Beta 1 & 2 (2013-03-07)
default behaviour of import is to import each file once. #import-once has been removed.
Either
Update your files to use the new syntax (remove the -once from your imports)
Or
To use the older version of the engine, download the previous (2.7) version and don't update until you know it has been fixed.
Or
Or you can configure your Visual Studio to look at the Nightly Build feed from Web Essentials to download the very latest version (caution, nightly builds may contain other bugs or stop working from time to time). TO do so go to Tools -> Options -> Extensions & Updates and add the feed: http://vswebessentials.com/nightly/feed.ashx
Which seems to add a workaround that makes it work with the old syntax as well.
In Less v1.4.0 #import-once has been removed and #import imports once by default. This means that with the following
#import “file.less”; #import “file.less”;
The second file is ignored.
I think that one is causing issue with import statements.
I have 2 LESS files. Globals.less and Site.less. Globals.less contains all of my global (go figure) variables and an import to a CSS reset definition. Site.less contains the styles in use.
Globals.less:
//Imports
#import "CSSReset.less";
//Colors
#color-background: rgb(0, 0 , 0);
Site.less:
#import "Globals.less";
body {
background: #color-background url('/Images/BackgroundTextureBody.png');
}
The problem is this: In Visual Studio #color-background in Site.less is underlined and the error is "Undeclared variable", but the LESS compiles to CSS just fine and the background color is properly set to #000. It is more of an annoyance than anything, but I lose Intellisense and I get warnings in my error list. I would like the editor to act as expected and be able to "see" my declarations in Globals.less when I am editing Site.less. Am I doing something wrong, is this a bug, or is my environment not setup correctly?
To get intellisense for a particular less file you can add a reference path in the same way you would to get intellisense in a js file.
Example
/// <reference path="Globals.less" />
#import "Globals.less";
body {
background: #color-background url('/Images/BackgroundTextureBody.png');
}
It appears that Visual Studio (or it's LESS interpreter) does not understand the scope of the variable within the imported Globals.less
Importing variables is a normal and common thing to do so I'd suggest that it's a bug or missing feature in your Visual Studio setup.
It turns out that I was using an older version of Web Essentials 2012. The first thing I should have checked and failed to do was to ensure that my environment was up to date. Updating Web Essentials to the latest version corrected the issue.
I am a little bit confused. I am trying to use Node.js with lessc to compile my application which includes parts of bootstrap. I want to be able to pick bits and pieces of bootstrap for what I need since I won't be using all of it. When I import bootstrap.less everything compiles perfectly. But if I import just reset.less or buttons.less I get: TypeError: Cannot call method 'charAt' of undefined. What is going on here?
My Folder Setup
less/
application.less
bootstrap/
bootstrap.less
reset.less
buttons.less
etc...
application.less
Everything compiles fine when I have #import 'bootstrap/bootstrap'
I get the above error when I have #import 'bootstrap/reset'
And I have tried adding .less to the end of the file name as well, same results.
I found online that less version 1.3.0 should fix this, but that is the version I am using.
Any help will be greatly appreciated.
The components are dependent on the variables.less and mixins.less. You will need to include them when compiling any component (or even just the reset.less, since it uses the mixins).