I've installed Zurb Foundation into my Yeoman project using yeoman install foundation then included it in my project by updating my Gruntfile.js using require: 'zurb-foundation'
The problem now arises when I try to edit my app/styles/main.scss file. I am unable to override the default Zurb foundation SASS variables.
I've tried to edit the _settings.scss file within app/components and also under components in the main directory - but to no avail.
Has anyone had any luck or have a solution to this dilemma?
I found the answer myself.
The key is to put an !important declaration after your override (basic CSS doh!), and place this override in your own main.scss or equivalent file:
$mainColour: red!important
and don't forget to add the require statement in your Gruntfile.js:
compass: {
dist: {
options: {
require: 'zurb-foundation',// ADD THIS LINE
css_dir: 'temp/styles',
sass_dir: 'app/styles',
images_dir: 'app/images',
javascripts_dir: 'temp/scripts',
force: true
}
}
},
Have you tried using yeoman-foundation-generator from github? https://github.com/pchen/yeoman-foundation-generator
It is like using standalone SASS and Foundation. You have to put the folder from the git repo inside your NPM installation.
Related
I have the following structure:
app/
pods/
components/
user-login/
component.js
style.scss
template.hbs
Template files and component files livereload correctly, however, when I save changes to my style files in Atom the changes are not applied on the webpage- they are only applied when I kill and rerun:
ember server
and reload the webpage. I have installed the following:
ember-cli-styles-reloader
and I have tried adding:
"liveReload": true,
"watcher": "polling"
to:
.ember-cli
and I also tried adding these options to:
ember-cli-build.js
inside the app variable.
What am I missing?
There is a better option I believe, and I recommend to do this way:
First install ember-cli-sass-pods addon that uses ember-cli-sass (will install automatically) and then generate your style scss files into your pods directories.
to install
ember install ember-cli-sass-pods
then add
var app = new EmberApp(defaults, {
// you must add Watched folder to your Ember-Cli-Build.js
sassOptions: {
includePaths: ['app']
}
});
For example:
app/components/user-login
app/components/user-login/component.js
app/components/user-login/template.hbs
app/components/user-login/style.scss
just simply run this command:
ember g style [path] -p //your path now is components/user-login
there are more options that you can read their documents
You are ,after installing and setting up that, able to use ember-cli-styles-reloader which probably will work smoothly. make sure you have followed all the rules that they mentioned in their documents to set up ember-cli-styles-reloader.
I have set up a basic project and only .scss files are picked up. I would like to write my CSS with the .sass format. How can I turn that on?
You can override the app script config files:
https://github.com/driftyco/ionic-app-scripts#overriding-config-files
In my package.json, I added the following:
"config": {
"ionic_sass": "./config/sass.config.js"
}
I created the sass.config.js (copy from the github project) and added the sass extension:
includeFiles: [
/\.(scss|sass)$/i
],
It's unfortunately impossible to update the watch config file, so I directly edited it in the node module:
Under #ionic/app-scripts/config/watch.config.js
Add the following .sass line below .scss:
'{{SRC}}/**/*.scss',
'{{SRC}}/**/*.sass'
i'm using ember-cli 0.1.5,
I'd like to build a css file for each 'skin-*.less' file in the app/styles folder. This works with plain CSS using the following config in my Brocfile.js:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'skin-light': '/assets/skin-light.css',
'skin-dark': '/assets/skin-dark.css'
}
}
}
});
After installing a LESS precompiler with 'ember install:addon ember-cli-less' this config is not respected and instead 'ember build' looks for app/styles/app.less.
Is there a way to make the broccoli less compiler respect the multiple outputPaths config for CSS files?
It would appear not; that’s a pull request for that very functionality, but it’s reportedly buggy.
This functionality is now available in ember-cli-less v1.1.0
I am using ember-cli for a new project and cannot get app.css rebuilt automatically when my app.less changes.
My environment includes:
node: v0.10.32
npm: 2.1.5
bower: 1.3.12
ember-cli: 0.1.2
ember-cli-less: 1.0.4
Brocfile.js includes:
var app = new EmberApp({
lessOptions: {
inputFile: 'godeeptest.less',
outputFile: 'godeeptest.css'
}
});
I have a godeeptest.less file in my styles directory.
Whenever I change godeeptest.less, the output file godeeptest.css is not built automatically. BUT, when I restart the ember server on my terminal, the output file is built and the browser window updates with the new styles, as expected.
Does anyone have any suggestions on how to get this to work as expected, where expected behavior is "change file, browser reloads"
thanks,
Mark
update #1
head of godeeptest.less:
#import "bower_components/bootstrap/less/bootstrap.less"; // include bootstrap
.navbar-inverse {
.navbar-textalt {
color: green;
.navbar-text;
}
}
Ok. I fixed the problem, which is not a problem with ember-cli or ember-cli-less. it's a problem with Dropbox. or more specifically, don't store ember-cli projects in a Dropbox folder if you want ember-cli to work properly.
I moved my project out of the Dropbox folder into another folder on my Mac, and the problem went away. so there is some conflict between the watcher and Dropbox, SPECIFICALLY with less files, but no other file types. (weird).
don't despair, "It could be that the purpose of your life is only to serve as a warning to others."
The problem
Foundation 5 was released last week, that's great, but the new version requires to use bower for using F5 with SASS and the official documentation seems to be a bit incomplete and immature.
I'm trying to create a project using the steps proposed by the docs:
[sudo] npm install -g bower
and then
gem install foundation
No problems here. The problem is when creating a Compass project:
foundation new MY_PROJECT
cd MY_PROJECT
compass compile
After Compass compilation, I get the following error:
directory stylesheets/
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
/home/cartucho/MY_PROJECT/scss
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
/home/cartucho/MY_PROJECT/bower_components/foundation/scss
Compass::SpriteImporter)
create stylesheets/app.css
Compass config file (config.rb):
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
The SASS file (app.sass):
#import "settings";
#import "foundation";
...
The problem seems to be in config.rb:
add_import_path "bower_components/foundation/scss"
because Compass fail trying to import the files settings and foundation but I don't know how to fix it. Any help will be highly appreciated.
Thanks.
You need to change the line foundation new MY_PROJECT by replacing MY_PROJECT with the folder you want to install the project on. After that, confirm that these folders exist on the directory you specified above - "bower_components/foundation/scss"
When starting a project run compass init and then compass watch (in Terminal) to watch for changes on the .sass files.
Personally, I don't go that route and use http://koala-app.com/ to convert or "compile" my Sass. It's FREE and awesome.
This is SASS were talking about. Please correct me if i'm wrong but you don't need the underscore when importing an "include" file. I create separate sass files for my variables and my mix-ins. They are prefixed with and underscore which signifies an "include" file. SASS recognizes #import "variables"; as #import "_variables.scss". So to be clear when it is an include file just the name of the sass file is need not the _ or the scss extension.
I have never put an underscore before any include file that I have named _filename.scss.
There is probably another issue going on. Possibly with the install and the paths for bower. For those who did add the underscore in the past and it worked...well you just bypass what could become a deeper issue down the road. You need to check your install.
In your app.sass file change the following line
#import "settings";
To
#import "_settings";
Explaination
When you run compass watch you got the error
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
This just means it can't find the settings file being imported. By adding the underscore to the settings file you have specified the correct file path. If you receive any other errors like this, make sure the file path is correct.
I think I had the same error; finally I found in the _settings.scss
You need to underscore before the importing the functions
Before:
// Uncomment to use rem-calc() in your settings
#import "foundation/functions";
After:
// Uncomment to use rem-calc() in your settings
#import "foundation/_functions";
Also you would need to import the settings same way.
In my example I made style.scss and import all the SCSS inside :
#import "foundation/_settings", "_normalize", "_foundation";
I encountered this same issue, but for me the solution was to change the import of settings in app.scss from:
#import "settings";
To:
#import "foundation/_settings";
Once you've done that, run compass watch again.
You can install Grunt into your project which uses compass's watch function and then some other clever stuff to compile your sass and livereload it in the browser! Here's a great tutorial on how to get it up and running! (it's as simple as creating two new files in the root of your project and then running a few commands from your command line! I seriously advise it!)
http://moduscreate.com/get-up-and-running-with-grunt-js/
I had the same problem.
For Ubuntu 14.04 users make sure nodejs and Bower are working properly.
You can follow these instructions here http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283