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.
-
Replies
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.
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!
You can create a partial in your SCSS file.
Then add your import in app.scss
This is the part that is confusing me
Are you trying to only include this CSS on certain pages?