I have a .less file that contains a few definitions that make use of variables that are defined in another file.
Example:
body {
font-family: #baseFontFamily;
font-size: #baseFontSize;
color: #textColor;
}
Initially, IntelliJ showed the variables as undefined. When I compiled with Lessc I'd get an error that read as such:
TypeError: Cannot call method 'charAt' of undefined
at getLocation (C:\PATH\npm\node_modules\less\lib\less\parser.js:212:34)
at new LessError (C:\PATH\npm\node_modules\less\lib\less\parser.js:221:19)
at Object.toCSS (C:\PATH\npm\node_modules\less\lib\less\parser.js:385:31)
at C:\PATH\npm\node_modules\less\bin\lessc:107:28
at C:\PATH\npm\node_modules\less\lib\less\parser.js:434:40
at C:\PATH\npm\node_modules\less\lib\less\parser.js:94:48
at C:\PATH\npm\node_modules\less\lib\less\index.js:116:17
at C:\PATH\npm\node_modules\less\lib\less\parser.js:434:40
at C:\PATH\npm\node_modules\less\lib\less\parser.js:94:48
at C:\PATH\npm\node_modules\less\lib\less\index.js:116:17
After doing a little reading I determined that this means there is an error somewhere up in my code. I naturally assumed it was due to the variable definition not working. I commented the lines with variables out, and lessc would compile my project fine.
However, even after I added the appropriate #import so that the variables were defined (and the lines with variables uncommented), I again received the compile-time error. Is there something I'm missing?
Issue discovered. There was 'config.less' file in the parent and child folders. Moving the contents of the config.less from the child to the parent version solved the issues I was experiencing.
I discovered the answer. I tried compiling just the one file (and not the suite of .less files). NPM showed that it was having issues locating one of the Mixins used. Upon #import-ing the proper file, the suite now compiles fine.
Here is the lesson:
- if you are having issues with one of your .less files, try compiling it by itself. NPM will give you more detail about the error than just a general stack trace.
I get these errors as well when i work like this, but the actual compiled css works just fine. I do compile my less on development and only put the css on runtime though, as i do not want styles to be depending on javascript...
Related
I am encountering a problem when trying to push my code up to heroku. I have run:
RAILS_ENV=production bundle exec rake assets:precompile
and got this error:
Sass::SyntaxError: Invalid CSS after " color: #f19f4d;5": expected "{", was ";"
(sass):916
I understand there is syntax error somewhere in my css yet i have gone through all my files and can not find this line. Can someone please tell me if there is way to locate this line or where it could possibly be. Thank you so much!
If you are using Bootstrap, it depends on jQuery so you'll need to make sure to include it in your application stylesheet so for example in app/assets/stylesheets toward the top of the file and before any bootstrap includes or imports you'll need
//*= require jquery-ui
If that's not the problem, thaen precompilation is failing due to some kind of syntax error. First try to any occurrence of f19f4d in your code by doing a full text search of your code. If you have a *nix based system you can just try either of these from the terminal,
if you are using git version control
git grep f19f4d
Or just
grep f19f4d
If that doesn't turn up the culprit, than it must be a third party dependency. You'll need to go through any includes in your css. Check in your layout file. You should have something like
<%= stylesheet_link_tag "application" %>
So then open the file app/assets/stylesheets/application.scss
You will then need to comment out any includes and add them back one by one until you find which library is causing precompilation to fail. You will need to do this for every layout and/or stylesheet until you find which one is causing the problem.
At the top of each stylesheet you should have a list of includes like
#import 'bootstrap';
Or they may look more like this:
//*= require jquery-ui
So to comment them to not load you can just make them like this while you are testing.
// #import 'bootstrap';
// require jquery-ui
You may got other compilation errors if you have a lot of 3rd party stuff all over the place, but you have to find the bug somewhere.
I've got a very weird issue with my Ember application. I have a style.css file that is (unfortunately) 4030 lines long due to circumstances I cannot change at the moment. It is included in my app/index.html file like so
<link rel="stylesheet" href="assets/style.css">
When I run ember build --prod on my ember app, I get the error: "Ember is not defined". Now here's the strange part: if I copy about 100 lines from the end of the style.css and then paste it to the beginning of the style.css file, then building to production has no problem, and the completed build runs perfectly. Of course, this practice of shuffling around the style.css cannot be continued for long, and therefore I need to find a solution - or at least the cause of this.
I'm asking if anyone has experienced this problem, and if so, what was done to fix it.
So. After researching and trial and error, I've found that the reason this was a problem was because I named my main css file 'style.css', which is a very common name for a .css file. One of my vendor packages (still don't know which one) had a .css file also called style.css, and during compilation, the vendor .css and my app's .css clashed with each other.
Changed the name to 'myCompany_style.css' and everything works fine. Also as per #kumkanillam's suggestion, moved all css compilation to app.css
Will edit answer to include issue link if I can re-find it.
I use SASS to preprocess my CSS within Netbeans on Ubuntu. If I generate the CSS without minifying, I don't get any errors at all. However, I want to make the CSS minified, so I've added the --compass --style compressed options to the SASS command.
When SASS generates a minified .css file, Netbeans marks it with all sorts of errors. Mainly they say Unexpected token RBRACE found, Unexpected token NL found, Disable filtering of "Unexpected token IMPORTANT_SYM found" CSS parsing error, and Premature end of file.
Despite searching the net, I can't determine if these are errors or warnings that I should take seriously, let alone how to get rid of them. My web pages still seem to render with the right styles, so maybe it's just warnings from Netbeans.
If they're just warnings that don't affect anything, how do I get rid of them? If they are actual errors, why is the SASS preprocessor generating them?
Starting with NetBeans 7.4 (with all updates), if you click on the bulb icon on line with error, there is option to filter out all css errors in given file/folder/parent folder/project etc. or specific type of error. On your first screenshot, there is such option (not sure why it is missing option to filter all css errors though)
I am using bootstrap with Meteor, and importing the bootstrap.less files, which is installed in the public folder, through an import command in main.less:
#import "public/bower_components/bootstrap/less/bootstrap.less";
Below it, I can start using the bootstrap mixins such as .clearfix() and text-hide() and they compile fine.
However, when I want to abstract my own less code into a separate file apply.less and import that file back into main.less, which now looks like this:
#import "public/bower_components/bootstrap/less/bootstrap.less";
#import "apply.less";
I now gets an error
=> Errors prevented startup:
While building the application:
client/less/apply.less:10:2: Less compiler error: .clearfix is undefined
This is really strange. Is this an issue with Meteor?
Another thing I found out - if I put this empty mixin definition
.clearfix(){}
at the top of my apply.less file, things will compile fine again.
Has anyone come across this issue before and figured out a workaround?
Rename your second file as apply.lessimport and import it as:
#import "apply.lessimport";
Basically, the less package looks for every file in the directory tree with a ".less" extension and compiles it to CSS individually, regardless of whether the file is being imported by another file.
When it finds a file with a ".lessimport" extension, it adds it to the list of watched files, but does not actually compile or do anything with it.
Out of nowhere, all of my stylesheets started throwing errors during compilation.
lessc static/css/styles.less
/gems/less-2.2.1/lib/less/js/lib/less/parser.js:385:31: .rounded_corners is undefined (Less::Error)
None of my mixins seem to be available in the main less file. The mixins.less file is imported at the very top of my stylesheet and is only imported once.
#import "mixins.less";
#import "reset.less";
#import "clearfix.less";
#import etc..
I've also checked each file for a Byte Order Mark, inspired by Variable Name Error "is undefined" even though "variables.less" imported, and even went back 4 weeks in this project's git history (where I'm 100% sure compilation ran successfully). I have had no luck thus far.
Oddly enough, compilation runs successfully using SimpLESS and Less Compiler for Mac.
I've narrowed this down to an importing issue because if I attempt to use a mixin at the top of the stylesheet and error is thrown with that mixin's name.
Anyone familiar with this situation?
I'm using version 2.2.1 of the Less Ruby Gem.
I think you need to be in the directory that contains the file you are trying to compile. Instead of running the command as:
lessc static/css/styles.less
try:
cd static/css
lessc styles.less