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.

(Alternative would be: minify the foundation CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)



$ 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)