I'd like to know how I can use SASS within an Ember-CLI addon?
I have my styles in /app/styles folder, but I'm not sure that's the right location to have them. I have broccoli-sass installed in my addon project, my Dummy test website compiles properly the scss files when I include my folder in /tests/dummy/app/styles/app.scss.
#import 'app/styles/app.scss';
But I don't know how I can compile the scss files to go into the /dist/assets/vendors.css, which is the file loaded by projects using this addon.
OK I just found out the solution
The style folder needs to be in /addon/styles instead of /app/styles, and the root file should be called addon.scss
Related
A few months ago, I inherited a C++ command-line XCode project that I've since turned into an app with a GUI, but XCode won't build it as an .app bundle:
Instead, XCode builds a Debug folder, which, interestingly enough, works as an app if I copy it and rename it to "[Bundle Display Name].app".
There are two problems with this though:
(1) I have to manually do this for each build
(2) It doesn't link to my Assets.xcassets file containing my app icons or my Info.plist file or any of the other resources I need.
I've scoured Apple's XCode documentation and come up with nothing. Are there any XCode veterans who know the solution?
EDIT: It seems like the only solution is to add a script to the Build Rules to manually change the Debug directory to an .app and structure it properly. The problem I'm now having is that my app doesn't see my .icns file unless the absolute path is hardcoded into the Info.plist file. For example:
<key>CFBundleIconFile</key>
<string>AppIcon.icns</string>
^This doesn't work
<key>CFBundleIconFile</key>
<string>/Users/.../build/Control Cam.app/Contents/Resources/AppIcon.icns</string>
^This works. But of course it can't find the icon anymore if I move the app to a different folder. Any ideas how to get it to use relative path names?
I want to install gulp-babel and babel-preset-es2015 in my project in WebStorm 2017, but after I install them in node_modules it is very slow to reopen the project in WebStorm. I have excluded the node_modules like this:
I can't use babel to transform the ES6 files. WebStorm becomes very slow and it stucks.
Please exclude the build destination folder ('dist' in your project) from the project: right-click on it in the Project view and select Mark as Excluded. It seems that the build process generates the files in the 'dist' folder on changes and the IDE keeps re-analyzing them considering them new files.
Firstly I am new to using foundation.
When you go onto foundations website and you download the complete foundation file you get this index file:
that has link references to the stylesheets and the Js files and if you start coding everything works just fine, but if I create a foundation project through php storm it downloads the foundation release straight from GitHub, but this folder:
does not have a index file that includes the required css and js files, and I have tried to find the files but they are not included in this version from github. What files do I need to link to get foundation working.
In short, you'd need to link foundation.min.css and foundation.min.js. also, make sure you include jquery before the js.
I suggest downloading a bundle from Zurb's site in this link and recieve a good and working bundle.
Foundation is a great framework so don't give up, it's totally worth it.
I am developing an addon in ember.js for my new ember app.
I am trying to figure out how to use sass as styles with my addon and make it independent from my app.
Saying that addon uses sass but the app using it dones't necessary has to have ember-cli-sass in its packages.json.
I've tried almost every solution that there is to be found on google, co I come here for the help :)
Lets say my addon name is awesome-tables, so if I put a css file in awesome-tables/addon/styles/addon.css the styles are concatenated into vendor.css as expected, but it doesn't work for sass / scss
For addons you should add #import intro your app.scss like next ( both from addons )
#import 'ember-freestyle';
#import "pod-styles";
such instructions usually described in README.md for repo. If it's your repo - check next code https://github.com/ebryn/ember-component-css/blob/ae18f897d5b40ef1b3346d8857f6a1136d1b7b4b/lib/include-all.js#L56 as example ( https://github.com/ebryn/ember-component-css/ work with css/less/sass )
P.S. check naming for addon styles
https://github.com/aexmachina/ember-cli-sass
Addon Development
If you want to use ember-cli-sass in an addon and you want to
distribute the compiled CSS it must be installed as a dependency so
that addon/styles/addon.scss is compiled into dist/assets/vendor.css.
P.P.S SASS with Ember CLI addons
In rails,
js files are located under
app/assets/javascripts
Similarly where to add js and css files in ember-cli app ?
app/styles/ should contain your stylesheets:
Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS
(though only one type is allowed, see Asset Compilation).
These are all compiled into <app-name>.css
If you need external JavaScript libraries, you should manage them in dependency sections of package.json and bower.json. You may have to include the assets manually in the build. This could be done by app.import() in ember-cli-build.js or by using ember-auto-import. Have a look in the User Guide for more details.
User Guide also contains a section about folder layout in ember-cli.