6

I'm trying to make a jekyll blog using foundation and sass, and I just can't seem to get the foundation sass to compile correctly. When I build jekyll, there are no errors, and the partial I wrote seems to load correctly, and foundation seems to import, but only the comments at the top.

My process so far was basically to run npm install foundation-sites --save

move the foundation sass stuff out of the node_modules folder, and then include foundation in my scss file.

You can see the directory and the css file that is output in the following screenshots. enter image description here

enter image description here

I'm kind of not sure what else I can try at this point any help would be appreciated! Thanks!

Edit: Here is a link to the branch and repo for this to see the code. https://github.com/samuraiseoul/kimchiChingu/tree/23-sass

samuraiseoul
  • 2,888
  • 9
  • 45
  • 65
  • 1
    A repository url maybe ? – David Jacquel Mar 17 '17 at 09:18
  • 1
    Yes this needs more information to check what is happening in your app.scss, because its actually different from the main.scss name, and I don't see a compiled css file also in the css folder. Remember that sass looks for the scss "main file" which in yoru case I believe it is "app.scss" which should have the @imports of the partials or whatever you want to compile to a NEW app.CSS file. So you might want to share some more information on how you are doing that ? – Leo Mar 17 '17 at 09:31
  • @DavidJacquel @Leo Here's a link to the branch on the repo with the sass files in it. I also edited the question to have the link as well. You should be able to clone it and run `jekyll build` to get it running. Thanks so much for our help and if you have any other questions please just let me know and I can add the required information. https://github.com/samuraiseoul/kimchiChingu/tree/23-sass – samuraiseoul Mar 17 '17 at 17:00
  • Which OS are you using? Which version of jekyll, ruby, and node? – Kris Krause Mar 23 '17 at 13:28
  • @KrisKrause I'm using Linux Ubuntu 16.04, Jekyll 3.4.0 and Ruby 2.3.1 as well as node 3.5.2 – samuraiseoul Mar 23 '17 at 13:54
  • See this answer: http://stackoverflow.com/a/42999918/938261 – ranieribt Mar 24 '17 at 12:50

3 Answers3

2

Hmm.. it seems like all the partials imported in foundation.scss are just sass functions, mixins and variables. So there's no actual css output.

Jan Cziżikow
  • 613
  • 2
  • 10
  • 20
  • Hrmmm, I used npm to generate the foundation stuff though and didn't really delete anything. Is there a different way to get foundation in the project that's better? – samuraiseoul Mar 22 '17 at 15:07
  • If you don't really want to change the original foundation CSS, you could just include `foundation.scss` and replace all the @include with minified foundation css file. To override the styles you can add another .scss file in the _sass folder and use @include after '@include: 'foundation''; in your main.scss. For example you would then have foundation.scss and custom.scss in your _sass file. In main.scss you would then have to write `@include: 'foundation'; @include: 'custom';`. This way your custom styles would overwrite the original foundations CSS. Hope this helps :) – Jan Cziżikow Mar 22 '17 at 15:14
  • That's what I'm doing right now in the main branch, but I don't want to do that because for a few things that works, but for something like the main color or another, if I want to change that in the whole project then I have to regenerate a full min.css from the foundation site and remember all my previous value. I want to get this working via scss so I don't have to include a lot of things I don't want, and can change things more easily in the future. Do you know how I can get this working via the foundation sass files? – samuraiseoul Mar 22 '17 at 15:31
  • I guess you could try doing this with some kind of task runner like Gulp or Grunt? [Here](https://github.com/core77/jekyll-foundation) is a repo on Github that I found that looks like has what you need - Foundation SASS and Jekyll. – Jan Cziżikow Mar 22 '17 at 15:42
  • Yes but that is for starting a new project, i'm adding foundation to an existing jekyll project. Also Jekyll has something to compile the SASS into it, so I don't need to run the task I wouldn't think as it already get's compiled. – samuraiseoul Mar 22 '17 at 15:46
1

Alright so I figured it out. The problem is that I had to either include the foundation-everything mixin in my sass file or the specific modules I wanted.

just using @import 'foundation'; wasn't good enough, I had to also put @include foundation-everything; or list each component I wanted in case I didn't want everything.

samuraiseoul
  • 2,888
  • 9
  • 45
  • 65
0

I had similar issue even after adding 

@include foundation-everything($flex: false);

I figured it out after updating my gulp-sass module.

Rijo
  • 2,568
  • 1
  • 22
  • 30