I have installed Foundation via Bower, and I can use the default foundation.css fine by setting it as main in bower.json, and then it's included in the html automatically. So, now I want to theme my Foundation stuff, but I'm not sure how to do the scss stuff with compass and grunt and all that. How do I accomplish this?
It would be nice to be able to just have foundation work with compass and all that.
Help would be greatly appreciated!
EDIT:
I added this to my bower.json in the foundation package:
"main": [
"scss/foundation.scss"
],
And then grunt adds the bower scss import and I manually added my settings files. I have the following in main.scss:
#import "foundation/settings";
// bower:scss
#import "foundation/scss/foundation.scss";
// endbower
I am importing the settings file and the foundation.scss file and I get no errors, but I don't see any of the styles on the screen at all. Any ideas?
This was related to the bugs with the new version of Sass and Foundation. To fix I had to do:
bower uninstall foundation
Then manually go into bower.json in the root of my project and tell it I wanted Foundation 5.4.3 like so:
"foundation": "zurb/bower-foundation#~5.4.3"
Then just do a bower cache clean and a bower install and it should work again.
Related
I'm trying to learn laravel and set up a new project with composer on Windows 10
if I try to compile the
resources\assets\sass\app.scss
I got the following error
Compilation Error
Error: File "c:\Users\Michael\www\demolaravel\resources\assets\sass\node_modules\bootstrap-sass\assets\stylesheets\bootstrap" not found
on line 9 of sass/c:\Users\Michael\www\demolaravel\resources\assets\sass\app.scss
>> #import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
why he complains about that dir - also the app.css (at least this particular line) is original. It's the way composer installs it.
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
body{
padding-top: 80px;
}
I just added the body selector at the end
I work with visual studio code and the live sass compiler extension. But I also tried Scout-App
also tried puting the absolute path but nothing works :(
It seems you didn't installed all your node dependencies.
Run this command npm install on your project.
the #import
write like this
#import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
compile new css with npm run dev
First make sure you have installed node and npm globally. Then delete the node_modules directory from you project, and run
npm rebuild node-sass
This command may take some times to execute. After that go to your project directory and run npm install. Then compile your assets with laravel-mix.
I also faced the the same problem in linux environment and I have come across with this solution.
Does anybody knows how to include compass in an Ionic 2 project?
I have tried to import compass-sass, but I can't find a path to set the compass preprocessing in my styles.
As pointed by this stackoverflow answer use this Compass lib
How i implemented in my Ionic 2+ project.
Installed via npm - npm install compass-sass-mixins
Imported to my project by adding #import "../../node_modules/compass-sass-mixins/lib/compass"; in file app.scss
Then run ionic serve
Hope this helps to implement useful mixins
I have performed the following tasks on my system (Windows 7 64bit):
Latest version of Node and npm installed
Ruby 2.0 installed
gem install compass
gem install foundation
npm install -g bower grunt-cli
I create a new foundation using this command
foundation new exampleProject
I perform this command while in the directory of exampleProject
compass watch
At this point, compass creates stylesheet directory with a file named app.css which contains some CSS which was apparently derived from foundation, but not all of it (it is missing the core features).
The code in my app.css file can be seen here: http://jsfiddle.net/vullnetyy/uLmmf8ge/
Had the same problem.
Create your project with following line
foundation new mySite --libsass
And start your project compile with grunt
grunt build
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.
fresh install of the framework.
When I open the app.scss with ruby:
sass --watch app.scss:app.css
I get an error - "fail to import files a b c ..."
That error is expected since all along the foundation scss files there are "important" ref's to files that aren't there!
Starting with the foundation.scss itself.
Any ideas why this happens and how to get it to work?
I'm working locally on windows btw.
The sequence of install I did:
ruby -> sass -> compass -> zurb-foundation
Thanks in advance!
I am late here but I think this will help others as well.
Download Foundation master from https://github.com/zurb/foundation
get foundation.scss file from scss folder inside foundation-master folder.
Rename it to _foundation.scss and put it inside the sass folder of your project, _foundation.scss file has everything in it so it will fix you r problem I think.