Foundation-sites: SASS @import in the new v6.3?

[jinch]

I am not 100% sure if this is a bug or user error but I'm trying to amend a vendor .scss file to the "app.scss" with @import. Unfortunately it is not compiling when generating the (app.css). This used to work fine for me in v.6.2.4 with the same configuration but I am trying to update to 6.3 to take advantage of the recent fixes.

Has something changed in how this is done?

Below is what used to work for me:
// SVG BURGER ICON > https://github.com/jorenvanhee/sass-burger
@import 'bower_components/sass-burger/burger';
// SLICK CAROUSEL > https://github.com/kenwheeler/slick
@import 'bower_components/slick-carousel/slick'

Any suggestion, not sure what I'm missing?

[ncoden]

Hi @jinch,

If I understand correctly, you are compiling Foundation by yourself, and have trouble with other Sass packages you imported beside Foundation ? It does not seem to be related to Foundation.

In any case, can you provide a Gist of app.scss and any code you think is relevant ?

[jinch]

You are correct, I guess it's more of a question about Sass @import than anything else. I just wasn't sure if anything changed in the recent update as this was previously compiling correctly for me before.

I am trying to compile both sass-burger (https://github.com/jorenvanhee/sass-burger) and slick-carousel (https://github.com/kenwheeler/slick) into my new 6.3 build but I am not having any luck.

---

The path to both of these vendor scss files are:
root > bower_components >sass-burger > _burger.scss
and
root > bower_components >slick-carousel > slick > slick.scss

---

Inside the app.scss file I have this at the bottom in order to import.
@import '../bower_components/sass-burger/burger';
@import '../bower_components/slick-carousel/slick/slick';

---

I have tried moving the .scss file to the same folder as the app.scss and simplifying the path as follow:
@import 'burger';
@import 'slick';

But with even that, I still have no luck.

[ncoden]

I do not see why these files would not being imported. Please make sure these files are not imported and do not require a mixin to be called to generate CSS. Have you an error message about that ?

[jinch]

No errors.. everything else compiles fine but I need these particular files for a project and I'm not sure what the issue is. The burger.scss file does use @mixin but I am not using that in my app.scss. Has anything change that would prevent @import from working in v6.3?

[ncoden]

If these files was not found, you would have a a compilation error.
Nothing we have done in v6.3 could prevent you to import file in your own compilation process.

Please make sure this happen only with v6.3 and not with the previous versions of Foundation.

[jinch]

I will confirm in my older project.

[natewiebe13]

For slick, you will need to specify that you are importing the scss file by using @import 'bower_components/slick-carousel/slick.scss' instead of @import 'bower_components/slick-carousel/slick' since a CSS file is provided within the same folder.
For burger, the file doesn't generate any CSS by importing, you have to use the mixin.

[jinch]

Thank you @natewiebe13

When you say I would need to use as a mixin...
how would I go about doing that?

[natewiebe13]

The demo folder in the repo has an example: https://github.com/jorenvanhee/sass-burger/blob/master/demo/style.scss

[jinch]

Awesome - when I find a window I'll try this out ~ thank you for the tip and the help!

[ncoden]

Thank you @natewiebe13

[jinch]

This solved my problem @natewiebe13 / thank you both for the help on this. Very much appreciated!

[kyledesousa87]

Hi could you show me how you included the js file in the app.js folder in src directory, i installed the Slick carousel via bower install and got the scss files to import but how does one add the js file so I can init my js function for the carousel. your guide would be awesome

[jinch]

These are more third party component questions than Foundation so it may be better to reference their source demo files directly (http://kenwheeler.github.io/slick/). In regard to my setup though, the below JS is how I implemented in my app.js file.

/START SLICK CAROUSEL/
$(document).ready(function(){
$('.related_products').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
/END SLICK CAROUSEL/

[kyledesousa87]

Hi jinch, thanks for the speedy response, but dont you also have to do //=require ('slick.js'); in the app.js file or do you call the external js slick files in the Html before body tag, the problem im having is loading the bower js files in the Dist folder the one for productions

app.js //= require jquery.slick

[jinch]

You would call 'slick.js' file in the HTML. Honestly, it's been awhile since I had to do this and I used the SASS compiler to load mine so the setup was a bit different but in general you are correct. If you call the slick.js directly on your HTML page you should be fine. Really best to download their demo and inspect the code they used.

Make sure your paths to the files are correct but if you look at their source example (https://github.com/kenwheeler/slick/blob/master/index.html), all they did was include the CSS in the head and the JS just before the closing body.

[kyledesousa87]

I was hopeing to call the js files all in one file in the app.js file then minify that with gulp, but if foundation needs to call it externally ill do so, thanks for all the help, cheers

[kball]

If you're using the ZURB stack you can add the slick files to the javascript and scss pieces of config.yml and they will get auto-concatenated into the app.js