I'm having a problem with Foundation 5's recommended SASS installation.
http://foundation.zurb.com/docs/sass.html
I followed the brief tutorial only a week or so ago and had no problems. Everything seemed to run OK and looked OK.
Over the course of the next few days I was making amendments to the project I am working on but only put the changes (CSS) into a custom.css file. I was wanting to ensure my client was happy with my proposed design before getting into the guts of SASS.
This evening I came to make the changes to SASS. I ran compass watch before I made any changes and I was immediately met with:
write stylesheets/app.css
This totally screwed up my index.html despite not having made any changes. The app.css file is only a fraction of the original size (~750 lines vs. ~8,500) and as a result the page is pretty much loading as raw HTML with no useful CSS - there's not even a hint of any styling on body for example.
After deciding to re-install from scratch I'm still no better off and running into very much the same issue.
According to Foundation:
app.scss
Here you can determine what stylings will be in your project.
By default all of Foundation is imported, but you can deactivate and
select specific components you want to import or add your custom Sass
here.
When I first installed Foundation, it was all imported as the default styles loaded for my index.html. It was acting how Zurb described it would. Now it only seems to grab some default styles but not the whole thing and I can't for the life of me figure out why.
Update: A friend cloned my repo and had no issues whatsoever. I've done the same and ran into the same issue again - must be something to do with my environment.
Further update: compass watch is only compiling two of the Foundation files, _icon-bar.scss and _visibility.scss. It seems to be pulling completely arbitrary lines even within those files, so something in them is not right either. It does not pull anything from anywhere else. There's a couple of pastebin links in the comments on the answer below.
I would greatly appreciate any assistance with this.
Thanks for taking the time to read.
I'm just learning Foundation 5 with Sass but your issue and the CSS output is looking how mine was compiling out as well, with lot's of comments and no CSS being pulled into the HTML..
This thread on the Foundation Forums really helped me. Seems like the latest Sass and Compass wasn't working properly?? Not sure the details but the suggestion from Szabesz to uninstall the latest Sass and Compass and install slightly older ones worked:
to uninstall:
sudo gem uninstall compass 1.0.0
sudo gem uninstall sass 3.4.0
to reinstall old versions:
sudo gem install sass --version 3.2.9
sudo gem install compass --version 0.12.7
What's in app.scss what ever is listed in there will be output as css in app.css.
#import "settings"
#import "foundation"
Is the default.
Related
I am trying to use sass styling and Live Sass Compiler extension, I recently installed it and now keep getting a extension host terminated unexpectedly error using VS Code.I have re-installed Live Sass Compiler several times as well as all my Live extensions and restarted my VS Code. Live Extensions I've re-installed. I know its the Live Sass Compiler causing this issue, because once I uninstall, I don't see the error anymore, but I can't update any styling in my . scss files. Everything is up to its current version.
How can I keep using Sass if this extension isn't working? Sass extension error Thank you!
This has been bothering me for so bloody long... Turns out (for me anyway) it was the extension "Color Highlight" that was causing it to crash. I'm going to be very careful downloading random extensions in the future..
for my situtation it blocks me only when I import a partial scss file so disabled it and only enable it when i have no more partial files to import.
color highlight is very useful for me.
or you can use the npm module "node-sass" with the flag -w
This is the exact issue I'm facing currently while using the "Live Sass Compiler". Whenever I try to edit any "#import" lines it just gives me the error.
See this image ... Extension host termination error!
Problem:
I'm facing this issue only while using the "Live Sass Compiler" as you can see in the screenshot ... Error in detail. This is similar to the one you're getting.
Quick Fix:
There must be some interruptions in the process due to which the extension is causing this error. Now, continue using the sass compiler and getting rid of that error I would suggest you uninstall the "Live Sass Compiler" and instead use npm install node-sass --save-dev to install the node-sass compiler as a dependency. Now in package.json enter the required script for node-sass to run.
This will allow you to compile .scss files to css. For more info checkout this link "https://www.npmjs.com/package/node-sass".
Hope you got your answer,
Cheers!
new user of Semantic-UI here, and would love to start learning it. I have avoided things like NPM and gulp for all of my short web development career and figured with this new project it would be a good time to learn it.
The issue that I am currently having is that setting up Semantic-UI, 1-to-1 with the video tutorial, I'm receiving no output files. My flow currently, for setting up my new project, is as follows:
Create new, empty ASP.NET website in Visual Studio 2015
Navigate to the project folder in Node.js cmd prompt
run npm install semantic-ui --save
From here, I follow the video tutorial at Semantic's site
In the video, nearing the end of it, you'll see "[gulp] created: <css/js file>" several times. I have been looking for the dist/ folder and it doesn't even create that. Does anyone know why this is happening? It takes no longer than 150ms for the "package"/"build" tasks to complete on my end, but it shows several seconds in the tutorial video. I just can't understand what I am doing wrong if I am following it verbatim...
Run npm install in project's root. For some reason this step is missing in documentation.
I'm having trouble with electron-compile.
The docs state
How does it work? (Easiest Way)
Change your reference to electron-prebuilt to electron-prebuilt-compile. Tada! You did it.
What reference, where? You can't be talking about package.json?
I've always run electron using supervisor -x "electron" -i "./" .
What am I completely missing / what should be the contents of my pull request to make this clearer?
I've installed electron-compile with npm i electron-compile --save-dev
I'd like to have es2015/jsx precompiled to es5, so that I can run a react application in electron. electron-compile appears to solve this problem.
You should install Electron as a dev reference in package.json, yes:
npm install --save-dev electron-prebuilt-compile
Don't install Electron as a global because then other people have to set stuff up to run your app (i.e. they now have to micromanage which version of Electron they have installed globally)
With the recent versions (electron 1.3.5), I was unable to get electron-prebuilt-compile working, well it works for development but packaging for production has no real working examples.
It seems the compiling and packaging needs to be done manually, so in case anyone needs a working example, it's here. Hope to save someone some time and pain.
I installed Neat prior to the most recent gem update to 1.7.1. Now I'd like to update the files in my site install, but I'm not sure how to accomplish that.
gem list
indicates
neat (1.7.1)
I tried
neat install
in my sass directory, but I get the message
Neat files already installed, doing nothing.
I'm not sure how to check what version I have installed, but the _outer-container.scss file for one is clearly a previous version when compared against the git repo. The documentation doesn't seem to cover precisely how to update my site files. I feel like this might be a really basic thing, I'm just not sure what to do outside manually copying the files.
Instead of neat install, try neat update.
I wanted to learn Jekyll mainly for designing websites and blogs.
What are the necessary required skills that I should have before I can start digging into Jekyll/
Thank you in advance.
Today I learned Jekyll. It's pretty straigt forward!
The minimum prerequisites are knowledge of HTML and CSS. Nice to have but not required before you start is some knowledge about Liquid Jekyll's templating engine.
I used Jekyll's own tutorial, that David already pointed out and read through the first few pages. Then I got hands on with it by following the quick start instructions from their homepage:
gem install jekyll
jekyll new my-awesome-site
cd my-awesome-site
jekyll serve
# => Now browse to http://localhost:4000
Installing it on my Mac worked fine with the pre installed Ruby and its packagemanager RubyGems on my Mac OS X 10.9. I already installed node.js and it's packagemanager npm before, but i haven't seen where it's needed but maybe somewhere under the hood.
From here I inspected the demo package, read a bit in the docs and googled my way through till I had a working site build by Jekyll.
Have fun!
P.S. For the posts and sites I refreshed my knowledge about the markdown syntax.
Well except html, css and javascript, you just have to learn Jekyll itself it's really easy.
Go for it !