DEV Community

Christian Sedlmair
Christian Sedlmair

Posted on • Updated on


Setup Foundation-Sites on Rails-7 and Vite



Foundation/sass slows down HMR aproximately 12 seconds. So, i use the asset pipeline for Foundation, by symlinking sass files from node_modules/, so Vite is freed from them. Custom Stylesheets, where will be the most changes, resides in frontend folder. Javascript goes the direct way, from the yarn (node_modules/) package to Vite.



$ npm i foundation-sites
Enter fullscreen mode Exit fullscreen mode


import 'foundation-sites'

import $ from 'jquery'; //=> ATTENTION: jQuery has to be imported after foundation. Foundation would not need this, it would be satisfied with the settings in vite.config.js
window.$ = $;

// initialize the page
window.addEventListener('load', (event) => {

window.addEventListener('turbo:render', (event) => {
function initPage() {
    console.log('foundation ready');
Enter fullscreen mode Exit fullscreen mode

=> Javascript should work, you should see foundation ready on Browser/development/console

Asset Pipeline

add settings file for sass variables and copy foundation

from app-root, run:

$ mkdir ./app/assets/stylesheets/foundation
$ touch ./app/assets/stylesheets/_settings.scss
$ cp -r ./node_modules/foundation-sites/scss ./app/assets/stylesheets/foundation
$ cp -r ./node_modules/foundation-sites/_vendor ./app/assets/stylesheets/foundation
Enter fullscreen mode Exit fullscreen mode

Smarter it would be symlinking them instead of copying. But, at least in my case, git doesnt transfer symlinks to folders (unlike symlinks to files). So, you would have to exclude them with .gitignore and adding them again by a deployment task (in my case capistrano) on the server. Here is gone the easier way.


make sure that the lines //= require tree and //= require . are removed

@import "settings";
@import "./foundation/scss/foundation";
@include foundation-everything()
Enter fullscreen mode Exit fullscreen mode

cannot tell why, but i was not able to refer the @import directly to the nodes folder, i had to do theese symlinks.

Vite Stylesheets

Create folder stylesheets and symlink settings file

$ mkdir app/frontend/stylesheets
$ cd app/frontend/stylesheets
$ ln -s ../../../app/assets/stylesheets/_settings.scss .
$ cd ../../..
Enter fullscreen mode Exit fullscreen mode


make sure stylesheet_link_tag "application" and = vite_stylesheet_tag 'application.scss', media: :all are present.

Test view


%button.button{"data-toggle" => "example-dropdown", :type => "button"} Toggle Dropdown
#example-dropdown.dropdown-pane{"data-auto-focus" => "true", "data-dropdown" => ""}
  Example dropdown.
Enter fullscreen mode Exit fullscreen mode


<button class="button" data-toggle="example-dropdown" type="button">Toggle Dropdown</button>
<div class="dropdown-pane" data-auto-focus="true" id="example-dropdown">
  Example dropdown.
Enter fullscreen mode Exit fullscreen mode

Image description

=> If the Popover works and looks like this, Foundation styles and javascript is working like it should.


Top comments (0)

We're hiring!

We're Hiring

We're looking for someone who can develop, maintain, and implement our product roadmap and strategy as a Senior Product Manager.

Head here to learn more.