How to Add Foundation 6 SCSS to Sapper
Using Rollup to include SCSS directly into your Sapper App
Sapper is a great, and efficient way to build your website with a SSR version of Svelte. However, adding a SCSS framework like Foundation or Bootstrap can be a bit of a pain, especially if you don’t want to just include the entire minified css file, and instead pick and choose your components.
As always, where there is a will there’s a way, and with Sapper, this comes in the form of rollup-plugin-scss.
Add rollup-plugin-scss via NPM
In your sapper repo, open up the command prompt/terminal and install rollup-plugin-scss
npm install --save-dev rollup-plugin-scssAdd in Foundation 6
npm install --save-dev foundation-sitesWe only need to save foundation for dev, as the production version will be reading a compiled css file instead of the node module.
Create your SCSS file
Next we need to create our SCSS file, which will be the entry point for rollup to use (which we will configure later), you can get more fancy with the structure if you wish, but to start with, let’s keep in simple.
In your src folder, create a new scss folder, and a newmain.scss file inside it.
Then, in your main.scss include foundation, and all the bits you need:
// /src/main.scss// Import Foundation from node modules
@import 'node_modules/foundation-sites/scss/foundation.scss';
// Include any components from Foundation as normal
// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;// Helpers
// @include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;
Inform Rollup about the file.
Now this is sorted, we need to tell roll-up and sapper that we have a new file to include, so in your rollup.config.js you add a reference to rollup-plugin-scss at the top, and then include your main.scss in plugins.
// Add this at the top with the rest of your imports
import scss from 'rollup-plugin-scss';//...// Add scss into the client plugins area, like this...export default {client: {input: config.client.input(),output: config.client.output(),plugins: [replace({'process.browser': true,'process.env.NODE_ENV': JSON.stringify(mode)}),scss({output: 'static/global.css',}),// ... file continues as normal ...
Notice how we have specified an output directory, which is the default css file for Sapper.
If you want to keep the css from within this file, you will need to move it before running your code (i.e. create a new scss file, and import that into main), or it will get overwritten when we run our code.
Tell Sapper what’s going on
Finally, you now need to tell Sapper to use this file, so you can import it in client.js , your file will end up looking like this:
import "./scss/main.scss";import * as sapper from '@sapper/app';sapper.start({target: document.querySelector('#sapper')});
Run Dev and See the results
If everything has gone smoothly we can use npm run dev and see our foundation styles affect.
It’s pretty simple to get this set up, and is a great way to include global styles that won’t get prefixed by svelte.
Well done, you are now a Sapper SCSS wizard 👏👏👏.
