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).
Related
I'm confused with some specific behaviour and can't find some informations that help me understand the error.
The situation is as follows: I made a small pyqt4 app that at some point dumps an OrderedDict to a yaml string using pyyaml or ruamel.yaml (tried both) and writes this to a file, or reads from this file. This goes very well executing the code as normal. Now I want to distribute my app by bundling it into a single file windows exe using pyinstaller.
Now if I directly use yaml.dump() or ruamel.yaml.dump() in a method of my pyqt4 form class to generate the yaml-string and write to a file (the standard way using with open ...), I am able to bundle the app using pyinstaller and the exe runs fine.
However, if I write a small function in a sub-folder/module that uses the exact same call to pyyaml (yaml.dump(dict)) or ruamel.yaml (ruamel.yaml.dump(dict, Dumper=ruamel.yaml.RoundTripDumper)) to generate the yaml string and save to a file using with open ... and use this in my pyqt4 method (I just wanted to make things more readable), pyinstaller starts to load a bunch of modules and does a lot more stuff (according to console output), resulting in the exe file beeing almost 5 times larger plus unusable throwing a fatal error pyi_rth_pkgres returned -1 at start.
Unfortunately, I don't understand much from either console output or warnings log, viewable in this gist. Maybe I am searching for the wrong terms. I also tried renaming the module to prevent shadowing.
Now my question is, does anybody know whats going on and can explain this behaviour?
After doing a lot of trial and error, I finally got it working.
I created a new module and build the dumping functions inside it. pyinstaller and the bundled exe work flawless. However, if i do the exact same thing in the previous module, even refactoring the name, it does not work. I even copied the complete code to the old module and it doesn't work. I have no idea why and at this point I am too afraid to ask :|
I am just glad it works now.
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 have been pulling what hair I have left out. I just downloaded Codekit this week and want to redesign my own site using Compass/SASS/Susy. I have tried several ways to get it to work, the preference in Codekit to point at the executable path. I am really excited to get started on this new endeavor, but I can't seem to get by the setup. Any help would be greatly appreciated! Thanks.
Is your project set up correctly? Susy 2 requires SASS 3. CodeKit 2 has an option to use libSASS instead of SASS (I use it). There are other dependencies for which I use Bundler. If you use Bundler to set up your project, it will add 'require 'compass/import-once/activate' to your config.rb. Other than that, there is no specific need to require or import compass. Do you have a CodeKit error message that you can post to let us see what is going wrong?
I assume that you are using Susy 2. If you are using Susy 1 you must add #import "susyone"; to your config.rb. But I expect you know that already.
Re your comments:
Using Bundler, my Gemfile includes:
gem "susy", "~>2.1.0"
gem "sass", "~>3.3.0"
gem "breakpoint", "~>2.4.0"
so these must be installed on your system accessible to susy. CodeKit doesn't need compass but my config.rb file includes these:
require 'compass/import-once/activate'
require 'breakpoint'
require 'sassy-buttons'
obviously you may not be using sassy-buttons.
The documentation for Susy2 is extensive and is available at http://susydocs.oddbird.net/en/latest/. You don't say how you set up your project, but I assume that your CodeKit setup points to the correct files from SCSS to compiled CSS.
You need to '#import susy' in one of your .scss files. (I'm not sure that that is necessary anymore).
I had resigned myself to the fact that every require statement in Typescript had to be relative to the file you were typing in, but I recently discovered an application that does this differently and it confuses me. I was hoping someone with enough skill could explain how this is working to me.
The application in question is the new Raven DB HTML5 Studio, which uses typescript, you can find the whole application here:
RavenDB HTML5 Studio
When browsing its source code, I came across something interesting... if you go and look at many of the files; In specific the one I am looking at... app/viewmodels/deleteItems.ts, it has a reference at the top that reads..
import document = require("models/document");
but models/document isn't a path relative to deleteItems.ts, but this works. Can someone explain how this is happening? I'm linking you RIGHT to the exact files I'm talking about. This kind of behavior is littered all over this application.
app/viewmodels/deleteItem.ts
app/models/document.ts
This is exactly the kind of behavior I really wanted to try and emulate in my own code, since trying to keep all of the paths relative to the file I'm working in is a headache, but this program seems to be completely free of that requirement.
This doesn't necessarily involve RavenDB, but I am tagging it anyway, because perhaps someone who has read over the Raven repository will understand it and be able to answer.
Update
I am trying to mimic this behavior in my own code, and not finding any success. I am sorry if I seem outright stupid, but this is all really confusing me. Here is what my structure looks like; My repository is private, so I cannot really just link to it.
app_content
scripts
home
controls
models
editors
utils
UserControls.ts
UserMapping.ts
UserElements.ts
ui
lib
jquery
jquery.js
jquery.validate.js
jquery.ui.js
kendo
kendo.all.js
kendo.aspnetmvc.js
// other libraries
Alright, that's a general feel for my folder layout. All typescript files are under the /home folder so that I can prevent github from saving their compiled javascript and locking that.
So then, in the file UserControls.ts, it looks like this right now...
import userElements = require('./UserElements');
import userMapping = require('./UserMapping');
export class UserControls {
// code
}
No matter what combinations I have tried, this is the only format/syntax that doesn't throw errors in Visual Studio. But from what I see in the RavenDB project, I should very much be able to declare it like ...
import userElements = require('utils/UserElements');
import userMapping = require('utils/UserMapping');
export class UserControls {
// some code
}
No matter what combinations I have tried, this is the only format/syntax that doesn't throw errors in Visual Studio. But from what I see in the RavenDB project, I should very much be able to declare it like ...
That is because they are using a drandalJS configuration to tell it how to resolve the file path. (see https://github.com/ayende/ravendb/blob/New3/Raven.Studio.Html5/App/main.js)
There isn't a similar configuration (basePath) for TypeScript at the moment. Your best option is to use relative paths as you've already noticed.
PS: an old but still relevant video that shows you how requirejs config works and relevance when using TypeScript https://www.youtube.com/watch?v=4AGQpv0MKsA&hd=1
The TypeScript compiler's module resolution algorithm is essentially undocumented, unfortunately. It tries to "split the difference" between AMD and CommonJS's module resolution rules, so it's somewhat hard to reason about.
What you're seeing here is an attempt to mimic CommonJS's "walk up the tree" resolution rule. When in the path C:\a\b\c\d resolving x, first C:\a\b\c\d\x is tried, then C:\a\b\c\x, then C:\a\b\x, and so on until it hits the root folder and gives up.
I have a Flash component that's just a library of compiled code with some exposed API calls. Normally we distribute this as a SWC or MXP, and it works just fine. Recently I had a client express interest in using my component, but they do all their development in MTASC only. MTASC doesn't support SWC files, so ss there a good way to send precompiled code that would work in MTASC? I'm not able to send them the original source code, but if there's some other method I'd appreciate it. I do have access to the source, so I can recompile it however necessary. Thanks!
I did find an answer, and I'm not 100% sure if this is exactly the process since I'm no longer at that job and don't have the computer/process in front of me anymore. It was a bit of a hack.
What it involved basically was unzipping the SWC file and getting a .swf and a bunch of .asi files out.
The .asi files are really just ActionScript files, but they contain intrinsic definitions, or just prototypes or footprints of whats actually there. The real meat of it is still in the .swf.
So you rename all those .asi files to .as and then put them into your MTASC classpath. Since they contain definitions, you shouldn't be getting any more "undefined variable" or "undefined function" errors at compile time. Now you just need to pull in the SWF, where the actual function bodies are defined, using loadMovie. once the loadMovie is complete, you should be able to use all of the functions.
The only caveat of course is that you have to wait for that SWF to load before calling of any of the functions from the SWC.
so step-by-step, it looks like this:
1.) unzip the SWC file. this can be done using WinZip or OS X terminal unzip command
2.) Rename .asi files to .as
3.) add new .as files to MTASC classpath
4.) add AS code to load the .swf in and make sure none of the SWC functions are called before the SWF is loaded
5.) compile
I'm pretty sure this is what we did, but i'm not in a spot to try it out right now.,
Hope this helps, let me know if you have any other questions and I'll see if I can help figure it out any more.