If there was every an issue that arose many times for me, it was trying to get Foundation 6 working with Webpack. Keep in mind that the solution is fairly simple thinking about it, but if you are also reading Sass via Webpack, and want to access Foundation through Sass, a whole new list of issues arise. Most of the problem comes from how Foundation is written, and how it deals with includes. Needless to say if you search for this solution yourself, you will find a lot of dead-ends especially when using today’s releases of these packages:

Foundation: 6.4.2

Webpack: 3.5.5

Really the solution is fairly simple, and it all comes down to the fact that we want to leave foundation out of the bundle while developing, and we want to be able to access it in our Sass files. Of course we still want to be able to access the CSS in our project as well. Since the project I set this up for allowed me to access the foundation classes in the Electron-Renderer via React, this should work for any case, if not most making sure to allow us to access foundation anywhere in the app.

 

Initial Setup

To get started there are a few packages to make sure we have installed via npm/yarn.

foundation-sites

sass-loader

 

Webpack Setup

Let’s first start with the underlying setup so we can make sure to access these files before jumping into the view side.

Externals

We certainly do not want Webpack to bundle foundation, so we need to make sure it is skipped in the config:

 export default {
  externals: [
    'foundation-sites'
  ],

 

Loaders

Let’s first make sure our project sass files can access Foundation:

      {
        test: /.(?:sass|scss)$/,
        use: [
          'style-loader',
          'css-loader', {
            loader: 'sass-loader',
            query: {
              includePaths: [path.resolve(__dirname, 'node_modules')]
            }
          }
        ]
      },

As you can see, we are allowing our sass files to access our node_modules folder, giving us direct access to the foundation-sites package.

 

With this setup, we should now be able to access Foundation from our sass files. To make sure everything is set correctly, the loader is setup to load raw sass, so you need to make sure that you are importing a sass file in your project.

 import './style/style.sass';

 

In the style.sass (or scss), we need to import Foundation directly.

@import '_reset.scss'

@import '~foundation-sites/scss/util/util';
@import '~foundation-sites/scss/settings/settings';
@import '~foundation-sites/scss/foundation';

// @import '~foundation-sites/scss/motioncd -ui';

@include foundation-everything;

I do want to point out that there is one specific issue with the above files. In the _settings.scss files that is being imported after _util.scss there is a line importing the util file as well. Unfortunately with this setup, it cannot resolve that file, and in my own personal setup I have redacted this line allowing the setup to work without errors.

The issue with this lies in the fact that if you install somewhere else, this change will not exist. I would suggest copying the settings/_settings.scss file to your style folder and loading it directly from the style file instead. The reason I even show this file is that this file works perfectly for this configuration, as long as you keep in mind that you need to remove or change the util/util import that will be found in the _settings.scss file.

 

Using Foundation

With the above, you should not have any issues accessing Foundation, but you can always change the foundation-everything include to the specific mixins you want to include. If you want to enable the Motion UI, you can also uncomment the import above the mixin include.

 

I really hope that helps anyone looking to get started with Foundation in Webpack, as I know how much trouble this can be to get working, even after days of research. Happy coding!