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
Related
I have built Xerces-c_3_1.dll from source using the Visual Studio solution provided in the download package. It works with the sample applications that are part of that package (as long as they're built with VS).
But I need to use the DLL with apps developed in C++ Builder 10 Seattle. The incompatible linkage and COFF-vs-OMF format issues (import lib) mean I need to tweak the build instructions. I believe I need to change the calling convention in the project properties from __cdecl to __stdcall, and add a DEF file to translate the exported functions for my environment.
(I believe this because I wrote and support a DLL that is used by programmers writing in many languages. I do my development in C++ Builder [familiarity with the environment], and create the release version in VS Express 2015 [massive performance improvement over Embarcadero, I'm sorry to say]. Added a DEF file for just the 32-bit version [not needed for VC++ 64-bit, just to make me nuts], and it works for everybody.)
Running TDUMP.exe on my DLL gets me output that looks like this:
EXPORT ord:0060='Edit_RunEdits'
Running tdump -ee xerces-c_3_1.dll >tdump.txt on the Xerces-c_3_1.dll built using __cdecl gets output like this:
EXPORT ord:1763='?Initialize#XMLPlatformUtils#xercesc_3_1##SAXKKKQBD0QAVPanicHandler#2#QAVMemoryManager#2##Z'
EXPORT ord:1764='?Initialize#XMLPlatformUtils#xercesc_3_1##SAXQBD0QAVPanicHandler#2#QAVMemoryManager#2##Z'
Running impdef def.txt xerces-c_3_1.dll on the __cdecl build gets output like this:
?Initialize#XMLPlatformUtils#xercesc_3_1##SAXKKKQBD0QAVPanicHandler#2#QAVMemoryManager#2##Z #1763; ?Initialize#XMLPlatformUtils#xercesc_3_1##SAXKKKQBD0QAVPanicHandler#2#QAVMemoryManager#2##Z
Repeating TDUMP and IMPDEF on the __stdcall build gets similar results.
And this is expected.
But how can I create a DEF file from this noise? I would be perfectly happy with a sample of the format to use to turn "Initialize#XMLPlatformUtils" into something the linker can match to "XMLPlatformUtils::Initialize()" in my client app.
By the way, I also used IMPLIB on both versions (__cdecl and __stdcall) to create an import library, which I added to my test project, but the linker continues to issue "unresolved external" errors for my calls to XMLPlatformUtils::Initialize and XMLPlatformUtils::Terminate. I believe that should be expected because of the name mangling.
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.
I am currently working on a Node.JS project written in TypeScript using Node.JS Tools for Visual Studio (NTVS). I have a few classes and enums spread out in 3 or 4 files in my project. I am now trying to use the classes defined in those files from my main app file. From my previous work with Node, I know that I would normally need a require call to import each other file/class if I were working with a text editor and the command-line compiler. But, if I open any TypeScript file in my project and start typing the name of a class defined in a different file, Visual Studio shows IntelliSense autocomplete for the class name and its members. This makes me think that the NTVS and/or TypeScript configuration are automatically making all of my classes available project-wide. But if I click the 'run' button, errors are printed to the console because Node can't find the referenced classes at runtime.
This behavior leads me to believe that IntelliSense isn't actually telling me that the classes are available, just that they exist (which seems odd). If I add a require call to the top of the file, and use that imported value instead of the original class name, Node finds the class and I can use it in my code. But this presents two problems:
I must come up with a new name to use for the variable that I import the class into. If I require() it with the original name, Visual Studio shows errors saying that the identifier is a duplicate, because it seems to believe that the original class is available project-wide.
I don't get the autocomplete or type checking in my usage of the class. This pretty much defeats the purpose of using TypeScript.
So, what's the proper way to do this import? Is there a way to make all my classes available globally? If not, what import statements do I need?
This behavior leads me to believe that IntelliSense isn't actually telling me that the classes are available, just that they exist
unless you have top level import or export statement the file is considered a global module and is available project wide : http://basarat.gitbooks.io/typescript/content/docs/project/modules.html
A global module will not work at runtime in node.js
You should use file level modules using import/export and compile with --module commonjs
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.