less,web-essentials , LESS Compiler: Unexpected token u


LESS Compiler: Unexpected token u

Question:

Tag: less,web-essentials

When I attempt to compile a LESS template in Visual Studio using Web Essentials, I receive an error that says "Unexpected token u" with no file name, no line number, and no column number. Why is this happening?


Answer:

Go to %USERPROFILE%\AppData\Local\Microsoft\VisualStudio\12.0\Extensions which is the folder where per-user Visual Studio extensions reside. WebEssentials will be located in a subfolder with a randomly generated name.

From inside the WebEssentials folder, open up the file Resources\nodejs\tools\server\services\srv-less.js and go to line 65, which reads:

map = JSON.parse(output.map);

The problem is source map output may be the undefined value. JSON.parse can only parse strings, so it casts that to the string value "undefined" before parsing, but JSON does not recognize that as valid token. (It only understands the null value, not the undefined value.)

So... change line 65 to read:

map = JSON.parse(output.map || "null");

And voilà; LESS compilation on files with empty output works again.

Source: https://github.com/madskristensen/WebEssentials2013/issues/1696


Related:


On hover color not changing using LESS css


css,less,jade
I'm trying to change the color of text as well as background image, when hovered on the image. I'm using LESS and i am able to change the background image, but the color of the text is not getting changed. Please help. Here's my code snippet :- Jade code (...

Horizontal line with fade out effect


css,design,less
I'm trying to replace bootstrap <hr /> with a gradient looking line like this one. So far I've tried used this mixin: .horizontal-gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor);...

LessJs file not being processed in ASP.NET


asp.net-mvc,less
I'm experiencing a peculiar issue and I'm having trouble diagnosing it. I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as...

Can I set a style conditional on window size?


javascript,html,css,iframe,less
I've set a style for an iframe that is a youtube video: iframe { width: 450px !important; height: 253px !important; } But if the window is resized to small size, then the left margin disappears and there is room for the original size of the iframe. Is it possible to...

Object doesn't support this action - all of a sudden


javascript,less
I'm running version 1.7.5 and for some incomprehensible reason, all of a sudden I'm getting syntax errors (none of my stylesheets have changed since it was working) and I'm including the .js file in the same way): Object doesn't support this action I've traced the error to this curious fragment...

Restrict mixin values and throw exception when invalid value is provided


less,less-mixins
I have the following Less mixin: .box-sizing(@value) { -webkit-box-sizing: @value; -moz-box-sizing: @value; box-sizing: @value; } and I would like to allow only the values 'border-box' and 'content-box' as parameter, otherwise the Less engine should throw an exception. How can I achieve this? Because without this validation I can write any...

How do I dynamically change less variables in Meteor?


meteor,less
I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at : less.modifyVars({ '@canvas': '#5B83AD' }); but my app. is saying that 'less is not defined'. Can...

searching through text file in terminal


linux,unix,awk,grep,less
Hi this might be a basic question for many, but it has however managed to eat a couple of hours of my time. I have large data file as an output from running a script. The file contains around 15 columns and around 100,000 rows. I wish to search through...

With Grunt, how can I compile all *.less files, if I have global mixins and constants?


gruntjs,less,grunt-contrib-less
I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders. So I configured grunt as follows: grunt.initConfig({ less: { ALL: { files: { 'compiled.css': '**/*.less' } } } } But this runs into a major problem:...

How to modify your CSS working with Mobile Angular UI and Bootstrap


css,angularjs,twitter-bootstrap,less,stylesheet
I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic. This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template. This is how a project...

Specify an attribute value using the parent selector in LESS/SCSS?


sass,css-selectors,less
Is is possible to use the parent selector in LESS/SCSS to specify a value for a parent attribute selector? I want the following output: [some-attribute] { font-weight: normal; } [some-attribute~="bold"] { font-weight: bold; } Given this (obviously incorrect) example: [some-attribute] { font-weight: normal; &~="bold" { font-weight: bold; } } Is...

Compile Less with Node, with dynamic variables


css,node.js,less
I'm building a SaaS project in NodeJS and I need to build CSS on the fly using LESS. I want to be able to change some of the less variables each time I build the css. The variables come from the database and can be different for each user (thus...

Using JavaScript to change Less files


javascript,css,less
I want to change a property of a Less file with JavaScript. This is my code document.getElementsByClassName('content-main--inner').style.border = '1px solid yellow!important'; I've tried it with !important and without it. But that doesn't work, the property doesn't change. I think the problem is here: ('content-main--inner') Is it possible to manipulate Less...

Font-awesome: how does it use class names to affect its content? [closed]


html,css,less,font-awesome
I'm trying to build a program that can utilize a classname for its data (i.e. if class="hero-banner-80" I could use the 80 as its width) and I was wondering how font-awesome does it? It uses its class-name to decide which char to place inside its element, and reading the src...

(AngularJS) Only one less file for entire Website


css,angularjs,styles,less
I am a beginner with AngularJS and I have a little problem, I installed grunt-contrib-less to support less files instead css but now I have to declare all less styles that will be compiled into only one css file. But my problem is normally when I'm using less, I write...

LESS variable self concatenation


javascript,css,less
This .a { @a: 1; @b: 2; @concat: @a; @concat: ~"@{concat}@{b}"; margin: @concat; } gives an error. Syntax error: too much recursion However, this .a { @a: 1; @b: 2; @concat: e(`(function (a, b) { var concat = "" + a; concat += b; return concat; })(@{a}, @{b})`); margin: @concat;...

Bootstraps responsive-utilities.less as single Less file?


css,css3,less,bootstrap
I want to use the visible / hide system from bootstrap without including the full framework... I try to include just the responsive-utilities.less but then i get errors from lessphp... Anyone know maybe a site where i can get this visible system seperate as stand alone less file?...

How to update variables with input values in .less file dynamically using AngularJS


css,angularjs,angularjs-scope,less
I realize a form of this question has been asked before (see 28208451), however, I need to get the input value and then set it as the new value so that other input fields can access it. Here is a link to my plunk. I can enter a new hue...

Less CSS Extend and media queries


css,less
I have a few Less utilities that I've used as extends - here's a typical scenario. .clearfix { &:before, &:after { content:""; display:table; } &:after { clear:both; } } However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios. What I would...

Using guards in the mixin


less,guard,less-mixins
I want to create a clever mixin for Bootstrap sources (mixin->buttons.less). What I have is as follows: Less: .button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; /* this variables must be used when I have parent's class="invert"*/ color: @background; background: @color; border-color: @background; /* end */ /*when not...

lesscss - which is the best way


less
article { // some css code //... // end css code h1 { transition: all 0.3s; } } body.active { article { h1 { transform: translate(0, 10px); } } } I try to write better body { article { // some css code //... // end css code h1 {...

Less beautifier - format code


sorting,format,less
Is there is code beautifier for less such as http://www.lonniebest.com/formatcss/ for css? I need sort properties in less code by alphabet.

How to set div to percentage of viewport?


jquery,angularjs,less
I have to set a <div class="row" ng-repeat="..">..</div> to a percentage of the viewport minus a set amount of pixels (wich propabally won't be a problem because of jQuery or LESS). The big problem is the ng-repeat. Is there a way in either jQuery, Angular or LESS to do this?...

Compile less file to css in expressjs 4.x


node.js,express,less
I want to compile the less file in public folder of expressjs application. Dependencies which I am using are "devDependencies": { "ejs": "^2.3.1", "express": "^4.10.6", "mysql": "^2.5.4" }, "dependencies": { "less": "^2.5.1", "less-middleware": "^2.0.1" } Content in styles.less file header { background-image: url('../img/bg.png'); height: 380px; input#searchBox { width: 100%; height:...

Laravel 5, Bootstrap, and Less


twitter-bootstrap,laravel,less,laravel-5
I'm just getting started with Laravel 5, and I followed this guide to install Bootstrap. It's my first time with Laravel, and I'm not familiar with responsive theming and related technologies. I then went to Startbootstrap to try out one of the templates in the Laravel framework. I created a...

Brackets: Custom Theme


json,github,less,adobe-brackets
I am trying to make a custom Brackets Theme. After I created a basic package.json file I went into extension manager to apply the theme so when editing the 'theme.less' file it would apply the fixes right away. Well my theme does not show up and I do have a...

less.modifyVars not working in Asp.Net MVC


c#,asp.net-mvc,asp.net-mvc-5,less,dotless
I have read this tutorial for working with Less in Asp.Net MVC5. To integrate LESS in ASP.NET MVC, I download and install the dotless NuGet package. And then added this bundle: var lessBundle = new Bundle("~/Less").Include("~/Content/Less/*.less"); lessBundle.Transforms.Add(new LessTransform()); lessBundle.Transforms.Add(new CssMinify()); bundles.Add(lessBundle); Here is the LessTransform: public class LessTransform : IBundleTransform...

Uninstall web essentials


visual-studio-2012,web-essentials
I have downloaded a .vslx file and installed which cuases web essentials to be part of VS 2012. This may be a silly question. But How can I remove the webessentials from vs.I cannot find such an option in VS 2012. I found it total messy...

CSS / Less / Sass - Match every previous siblings when :hover


html,css,hover,less
In this code: <div id="Container"> <span class='first'>First</span> <span class='second'>Second</span> <span class='third'>Third</span> </div> I want to change color, when :hover. IF (.first:hover) THEN .first { color: red; } IF (.second:hover) THEN .first, .second { color: red; } IF (.third:hover) THEN .first, .second, .third { color: red; } Is this possible without...

node.js less removes background property when there are two using variables


css,node.js,less
I have a problem with less: @frames_color: #faeacd; @menu_color_hex: #faeacd; @menu_color_rgba: rgba(250, 234 ,205 , 255); with less: .topmenu { a { background-color: @menu_color_hex; background-color: @menu_color_rgba; } } results in css: #user_field .topmenu a { background-color: #faeacd; } AND .topmenu { a { background-color: green; background-color: @menu_color_hex; background-color: red; background-color:...

How to pass a LESS variable into a class name


css,less
I have a LESS variable: @columns: 12 I would like to pass this variable into a CSS class name ideally as: .one-{@columns}-inner {} Is it possible?...

Change Bootstrap gutter


html,css,twitter-bootstrap,less
I'm using Bootstrap v3.3.4, and I'm quite new at it. Is there any easy way to change Bootstrap gutter without recompiling it from its less files or using the website editor or any-other way that has something to do with modifying bootstrap.css? What I'm trying to do is to get...

Using rulesets in LESS for media queries


less,media-queries
When using Sass I would do something global like this (which I got from CSS-tricks btw) // Variables for MQ's $mq-mobile-portrait : 320px !default; $mq-mobile-landscape : 480px !default; $mq-tablet-portrait : 768px !default; $mq-tablet-landscape : 1024px !default; $mq-desktop : 1382px !default; Then I would create mixins for the media queries like...

Defining a:focus selector


less
I have the below HTML structure. <html> <a class="customcssstyle" href="#'>Link</a> </html> Now I need to have a style, such that on focus on the link , it should appear in red. For that in normal CSS, we write it as: a.customcssstyle:focus { color:red; } May I know how we can...

Bootstrap, less, how to change number of @grid-columns for nested rows?


twitter-bootstrap,less
I'm building a bootstrap 3 layout and I'm trying to change the number of columns for the nested row so that the nested columns have the same width as top-level columns. I tried something like this but to no avail. <main id="container" class="section"> <div class="main-body"> <div class="sidebar"> <p>content</p> </div> <div...

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword


fonts,error-handling,less,gulp
So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from fonts.com. Here's the relevant task in our gulpfile: var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }); browserSync = require('browser-sync'); reload = browserSync.reload; gulp.task('styles', function()...

How to throw an error in the LESS compiler


css,compiler-errors,less,throw,less-mixins
Question Is there any way to (programmatically) throw an error in the LESS compiler? Why? I have been fiddling around with mixin guards today, because I wanted to generate my CSS margin based upon element size and element count. I thought it would be cool to directly throw an error...

LESS CSS - &:focus not working in variable selector


html,css,less
I have the following code in my .less stylesheet. @text-inputs: input[type=text], input[type=password], input[type=email], input[type=number]; @shade: rgba(0, 0, 0, 0.1); .highlight { background: @shade; } .input-highlight { @{text-inputs} { .highlight; } } .input-highlight-subtle { @{text-inputs} { &:focus { .highlight; } } } My HTML: <body class="input-highlight-subtle"> <input type="text" placeholder="Type Here" />...

How can I use LESS in jsfiddle?


javascript,css,less
I'm new with jsfiddle, and I trying to use LESS but I did not see it in the language options, how can I make it work with LESS. I try to link less.min.js in external resources but neither worked Please help me. EDIT1: I'm proving some features of less and...

LESS selector for element and child?


less
With LESS how can I apply styles to both a selector and the selector within it? My demo I need to apply opacity and z-index to the class a, and to label that come directly after it. .a { color: red; opacity: 0.9; z-index: 2; & + label { color:...

Will performance improve/decrease if I directly refer LESS in html?


asp.net-mvc,performance,less
I'm using LESS CSS and Dot Less in my ASP.NET MVC project. I'm directly referring LESS using bundles bundles.Add(new LessBundle("~/styles/templates").Include("~/Content/Stylesheets/Templates.less")); But this link saying if we use less.js in the html it will degrade the user performance. But i'm not using less.js in my project. I've the following questions. Shall...

ASP.NET MVC how to change less variables with javascript?


c#,css,asp.net-mvc,less
In my application I must add feature for the user to chnage UI colors. For this purpose I have created .less file and set some global variables to their default value. What is the best practice for creating theme in Asp.net MVC?...

Inject css content from absolute external url using LESS


css,less
I need to include css from external recourse into my result css. I use LESS preprocessor. Is there the way to do this? For example, .wrapper { @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; } But that's not working for me. I get the same css: .wrapper { @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; } I want it to...

Redirect content to a file in ascii encoding


windows,powershell,cmd,less,windows-8.1
We're running lessc from the PowerShell like this: lessc -x style.less > style.min.css Unfortunately, style.min.css file is in unicode whereas we would like it to be in ascii. How can we force that encoding when writing the result to a file from PowerShell? Interestingly, when we run the same command...

Ant exec command argument dealing with multiple files


java,ant,less,exec
I am using ant exec command to implement the less utility to view the source code of a bunch of .java files. (I know that there are other ways to do this like using concat) So the call ant view works if I specify only one file: <target name="view"> <exec...

Less - How to replace integer with a string?


less
I have a LESS variable: @columns: 12; I create a dynamic class name out of it: [email protected]{columns} {} // returns .one-12 {} How do I replace the 12 with a string "twelfth" Pseudo Code [email protected]{replace(columns, "twelfth")} {} The result will be .one-twelfth {} Advice will be appreciated! ...

“Additive” property values with LESS mixin


less
I'm looking for a feature that may or may not be available in LESS. I have a mixin that adds a "glow" with box-shadow, which I use on various elements - buttons, inputs etc. .glow() { box-shadow: 0 0 5px skyBlue; } What I'm looking for is a way to...

PhpStorm LESS Watcher configuration


css,less,phpstorm
I am using PhpStorm 8 to work on some LESS files. variables.less gets imported from styles.less. When I save variables.less only a variables.css is being made. How do I configure the watcher to transpile only styles.less > styles.css and automatically upload styles.css? Here's my current config: ...

FontAwesome - Failed to decode downloaded font


css,fonts,less,font-awesome
I found allready this: http://stackoverflow.com/search?q=Failed+to+decode+downloaded+font But the Answers dont help to fix my problem =/ I got on my page this errors in console: Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff2 index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font:...

Rails less url path change


ruby-on-rails,ruby,url,path,less
Developing a Rails application with the less-rails gem I found something unusual : // app/assets/common/css/desktop/typo.less @font-face{ font-family:'SomeFont'; src:url("fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot?#iefix"); // ... } The requested font is app/assets/common/css/fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot This font is compiled with less and the results is : @font-face { font-family: 'SomeFont'; src: url("desktop/fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot?#iefix"); //... } Do you know why is...