Foundation 6 with Webpack using Sass

Foundation 6 with Webpack using Sass

Using Foundation 6 with Webpack is not a simple task, and when you introducing sass makes it worse. Most issues come from how Foundation deals with includes, but there are workarounds.

The Resolve

Foundation: 6.4.2

Webpack: 3.5.5

We want to leave foundation out of the Webpack development bundle, but we want access to it in Sass. This was originally setup for access to Foundation in an Electron Renderer process. This will allow access to foundation anywhere in the app.

Package Setup

There are a few packages needed first. Install the following via npm or yarn.

foundation-sites

sass-loader

Foundation 6 with Webpack

Start the underlying setup by making sure there is access to Foundation before jumping into the view.

Webpack Externals

We do not want Webpack to bundle foundation, so make sure to skip it in our Webpack config. We do this by adding the package to the externals list:

...
export default {
  devtool: 'source-map',
  entry: 'index.js',
  externals: [ 'foundation-sites' ],
...

Sass Loaders

In the webpack configuration’s Sass rule, give the sass-loader access to Foundation. Use the includePaths option to include the node_modules:

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

By giving our sass files to access to the node_modules folder, we have direct access to foundation-sites.

Foundation with Sass

So, we now have access to Foundation in our sass files. Since the loader setup to load raw sass, make sure your app imports the top-level sass(or scss) file.

 import './style/style.sass';

In the style.sass, 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;

There is one specific issue to be mindful of with the above. Inside the _settings.scss file, there is a reference to the _util.scss file, but is imported before _util.scss. Since this causes a resolve error, we want to comment out this line in the _settings.scss file.

When you install another package via npm or yarn, this change will be over-written. To avoid this, make a copy of the settings/_settings.scss file and place it into your style folder. Change the style.sass import to use the new _settings.sass instead. As long as you’re mindful of needing to remove or change the util/util import found in the _settings.scss, this will work great.

Adding More to Foundation

Now you can finally access Foundation, and you can change the foundation-everything include to the specific mixins you want to include. To enable Motion UI, uncomment the import above the mixin include.

Because of how much trouble this package causes, I really hope this helps anyone looking to use Foundation in Webpack. Happy coding!

 foundation javascript sass webpack