I want to use stylus in a yeoman project
I'm following the instructions here
https://github.com/yeoman/yeoman/wiki/Stylus-integration
From this SO question
How to use Yeoman with Express/Jade/Stylus?
But it's not working. I'm using Yeoman v1.0.5 - is this documentation out of date? Or maybe I'm just being stupid...
I'm using it in an app generated by genetator-backbone if that makes any difference. It talks about removing the compass bits, but they aren't there. Perhaps there's something in that?
My fault. Because I was adding stylus from scratch and not overriding compass, I needed to reference my stylus action in the various grunt.registerTask() calls.
Related
I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.
When creating a new project using Yeoman's angularJS generator (yo angular), the app is initialiazed with the following directory structure:
app
scripts
controllers
aFeatureController
bFeatureController
directives
aFeatureDirective
bFeatureDirective
views
aFeatureView
bFeatureView
While this traditional MVC structure works well, I find it harder to navigate than a feature -centric structure, where all files related to the same section of the app are living under the same roof. In other words, I'd like to have the following structure instead:
app
aFeature
aFeatureController
aFeatureDirective
aFeatureView
bFeature
bFeatureController
bFeatureDirective
bFeatureView
Is it possible to configure gruntfile and Yeoman so that grunt keeps tasking and Yeoman scaffolding generators still function properly?
The structure you pointed out is generated by the default angular yeoman generator.
For the feature based structure that you want, (which I personally like as well), can be generated by other yeoman generators like generator-cg-angular.
There are quite a few generators which do the same. You can find one that suits you best by searching for angular on yeoman. These generate this structure by default without having to change your grunt or writing a new generator.
I minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.
A typical extjs example application includes the extjs library by referencing files such as:
ext-all.css
ext-all.js
What's the 'rails 3.1 way' of including these files, noting that they reference hundreds? of files in subdirectories
(e.g. ext-4.0.2/resources/themes/stylesheets/ext4/default/_all.scss)
and there are relative paths:
(e.g. background-image:url('../../resources/themes/images/default/shared/shadow.png'))
I'm tried numerous combinations of require_tree et al., but can't seem to get it to work.
I'm wondering if I need to mess w/ 'provide', but I can't seem to find the documentation I need.
What you want is for this file to compile via the Rails asset pipeline:
resources/themes/templates/resources/sass/my-ext-theme.scss
To get this to work, I learned a few things the hard way:
ExtJS uses SASS to compile (so does Rails) and Compass, which includes blueprint and compass CSS kits. Compass doesn't work with rails, you need to use the gem "compass-rails", which doesn't include the CSS toolkits. Only the main compass gem has these toolkits, and it's a dependency for compass-rails so you should get them if you bundle compass-rails, they need to be in your sass.load_paths config. If you include the "compass" gem without compass-rails you will have strange errors and become an expert at the rails asset pipeline as you try to solve them!
ExtJS uses an older version of SASS, the newer one Rails uses doesn't like having functions and mixins defined inside of modules. To fix this, look at the errors it's giving you (always a function or mixin definition) and move them to _functions or _mixins files.
(more info: getting error after ugrading to sass-3.1.8)
Here's how to get up and running:
Put this into your config/application.rb:
# Set up our ExtJS SASS build environment
config.sass.load_paths << "#{Rails.root}/vendor/assets/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/compass/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/blueprint/stylesheets"
Put the ExtJS stylesheets (the ext4/default directory in the SDK) here:
vendor/assets/stylesheets/ext4/default/
Put my-ext-theme.scss into app/assets/stylesheets and use it like you normally would with rails. It will call this code:
#import 'ext4/default/all';
That will bring in all of the ExtJS definitions, and you should be on your way.
Jeff! Take a look at my answer here, I think your problem is the same.