Menu icon Foundation
Add utility CSS files via F6 CLI?

How does one add utility CSS files outside of app.scss in the Foundation CLI workflow? I have a couple of pages with a slideshow that requires a large chunk of CSS, but most of the pages in my site don't need that CSS. I've set up special layout templates for those slideshow pages and am using Panini Front Matter to switch to them. The slideshow template includes an external CDN call for the necessary slideshow JS package, and I also want to put in a call to a separate local slideshow.css file, but I can't figure out where to integrate that file into the workflow. If I put it in DIST it gets removed when I stop and restart the stack. Again, I don't want to include it in app.scss because most of my pages don't need it.

cssscssfoundation cli

How does one add utility CSS files outside of app.scss in the Foundation CLI workflow? I have a couple of pages with a slideshow that requires a large chunk of CSS, but most of the pages in my site don't need that CSS. I've set up special layout templates for those slideshow pages and am using Panini Front Matter to switch to them. The slideshow template includes an external CDN call for the necessary slideshow JS package, and I also want to put in a call to a separate local slideshow.css file, but I can't figure out where to integrate that file into the workflow. If I put it in DIST it gets removed when I stop and restart the stack. Again, I don't want to include it in app.scss because most of my pages don't need it.

Rafi Benkual over 3 years ago

You can create a partial in your SCSS file.

Then add your import in app.scss

This is the part that is confusing me

 don't want to include it in app.scss because most of my pages don't need it.

Are you trying to only include this CSS on certain pages?

Joel Davies over 3 years ago

Yes! I only want to include this "component" CSS on some pages, not all pages. Including it on all pages is what will happen if I @import it in app.css, correct?

Rafi Benkual over 3 years ago

Ok, so you can add a CSS file into your project assets folder. Since it will not be compiled, you'll link up the path to the stylesheet directly. You'll want to have the CSS file copied into the dist folder.

In the Gulpfile, you can create a copy task that moves the file over.

Joel Davies over 3 years ago

Okay, so looking at gulpfile.babel.js and going by what you are saying, it looks like that functionality is already in there:

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

That looks to me like if I place my slideshow.css in the top level of /src/assets/ , gulp will give me /dist/assets/slideshow.css -- giving me a link I can code into my layouts variation.

I didn't think to look in the gulpfile! Many thanks; I'll try that out!