Foundation scss on Rails 5.2 with Webpacker

Question

How can I set up Foundation scss and JavaScript in a Rails 5.2 application with webpacker?

Here's what I have done so far:

Create new rails application with webpack option:

rails new myapp --webpack

Do webpacker setup:

rails webpacker:install

Add "Foundation for Sites":

yarn add jquery foundation-sites

From there I am kind of lost as to the correct places to put files, what configuration to add, and where it should go. I was kind of expecting to see a webpack.config.js file somewhere. I see in the webpacker readme that there is the app/javascript/src/application.css file. Do I just start referencing other files from there and it will all end up compiled/concatenated together?

Answer 1

Putting this answer here for others to see. It is largely based on the link that @jdgray provided.

Create a new rails application with webpacker:

rails new myapp --webpack

You don't need to run rails webpacker:install manually as I'd initially thought as it gets run from the prior command anyway.

Change directory into your rails app and add Foundation (and jquery, which the foundation plugins need):

yarn add jquery foundation-sites

That will leave you with an application capable of using webpack, but nothing actually in-use yet.

The bulk of things will end up in the new app/javascript directory, but it makes sense to rename that when putting more than just javascript in it.

Rename that to app/webpack and then edit config/webpacker.yml to change the default.source_path value to also be app/webpack. Any name can be used of course, but webpack seems like a decent choice. That bit of config will look like this:

default: &default
    source_path: app/webpack
    source_entry_path: packs
    public_output_path: packs
    cache_path: tmp/cache/webpacker

Webpacker uses "packs" as entry points to add to your views/layouts. In the app/webpack/packs directory you should have application.js already. Create a file named stylesheets.scss in app/webpack/packs to handle stylesheets. More will be added to these later.

Next create the directories app/webpack/src/javascript and app/webpack/src/stylesheets which will be the places to put all of your usual javascript and scss code.

To set up configuration some foundation stuff, create a directory app/webpack/src/stylesheets/foundation_config and create the file foundation.scss in it. Inside that file put the following lines, which will reference foundation and make a few specific foundation features availble:

@import '~foundation-sites/scss/foundation.scss';
@include foundation-global-styles;
@include foundation-grid;

That new foundation.scss file alone won't do anything and needs to be references by a pack. Add the following line to app/webpack/packs/stylesheets.scss:

@import '../src/stylesheets/foundation_config/foundation'

Now you have a pack file, which will load your source file, which loads foundation. The last thing to do is to use that pack file in your layout. In app/views/layouts/application.html.erb add the following line in the head tag:

<%= stylesheet_pack_tag 'stylesheets' %>

Note: In the development environment (at least with Rails 6.0.2) this wil not be enough to call the css file into from the head tag. Since config/webpacker.yml is set to:

default: &default
        ...
        extract_css: false

If that is set to false, you can either set it to true or have both the javascript_pack_tag and the stylesheet_pack_tag in app/views/layouts/application.html.erb. With the second solution the css file is injected after page loading into the head tag by the compiled js.

With all of that, Fondation will be working via webpacker. The structure will of course allow for any other javascript of stylesheets to be used as well, but this question was just about Foundation so I'll stop here. Thanks again @jdgray!