Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't seem to get Foundation to work with this

See original GitHub issue

This is my webpack.config.js:

var webpack = require('webpack');
var path    = require('path');

module.exports = {
    entry: [
        './public/javascripts/main.js',
        './public/javascripts/jsx/QueueSection.jsx',
        './public/stylesheets/style.scss'
    ],
    output: { path: __dirname + "/public/javascripts/", filename: 'bundle.js' },
    devtool: 'inline-source-map',
    resolve: {
        moduleDirectories: ['../stylesheets/']
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /.js?$/,
                loader: 'babel-loader'
            },
            {
                test: /.scss$/,
                loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']             
            }
        ]
    }
};

in my style.scss is:

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */



// Sass utilities
@import '~foundation-sites/scss/util/util';

// Global variables and styles
@import '~foundation-sites/scss/global';

// Components
@import '~foundation-sites/scss/grid/grid';
@import '~foundation-sites/scss/typography/typography';
@import '~foundation-sites/scss/forms/forms';
@import '~foundation-sites/scss/components/visibility';
@import '~foundation-sites/scss/components/float';
@import '~foundation-sites/scss/components/button';
@import '~foundation-sites/scss/components/button-group';
@import '~foundation-sites/scss/components/accordion-menu';
@import '~foundation-sites/scss/components/accordion';
@import '~foundation-sites/scss/components/badge';
@import '~foundation-sites/scss/components/breadcrumbs';
@import '~foundation-sites/scss/components/callout';
@import '~foundation-sites/scss/components/close-button';
@import '~foundation-sites/scss/components/drilldown';
@import '~foundation-sites/scss/components/dropdown-menu';
@import '~foundation-sites/scss/components/dropdown';
@import '~foundation-sites/scss/components/flex-video';
@import '~foundation-sites/scss/components/label';
@import '~foundation-sites/scss/components/media-object';
@import '~foundation-sites/scss/components/menu';
@import '~foundation-sites/scss/components/off-canvas';
@import '~foundation-sites/scss/components/orbit';
@import '~foundation-sites/scss/components/pagination';
@import '~foundation-sites/scss/components/progress-bar';
@import '~foundation-sites/scss/components/reveal';
@import '~foundation-sites/scss/components/slider';
@import '~foundation-sites/scss/components/sticky';
@import '~foundation-sites/scss/components/switch';
@import '~foundation-sites/scss/components/table';
@import '~foundation-sites/scss/components/tabs';
@import '~foundation-sites/scss/components/title-bar';
@import '~foundation-sites/scss/components/top-bar';
@import '~foundation-sites/scss/components/thumbnail';
@import '~foundation-sites/scss/components/tooltip';

@mixin foundation-everything($flex: false) {
  @include foundation-global-styles;
  @if not $flex {
    @include foundation-grid;
  }
  @else {
    @include foundation-flex-grid;
  }
  @include foundation-typography;
  @include foundation-button;
  @include foundation-forms;
  @include foundation-visibility-classes;
  @include foundation-float-classes;
  @include foundation-accordion;
  @include foundation-accordion-menu;
  @include foundation-badge;
  @include foundation-breadcrumbs;
  @include foundation-button-group;
  @include foundation-callout;
  @include foundation-close-button;
  @include foundation-drilldown-menu;
  @include foundation-dropdown;
  @include foundation-dropdown-menu;
  @include foundation-flex-video;
  @include foundation-label;
  @include foundation-media-object;
  @include foundation-menu;
  @include foundation-off-canvas;
  @include foundation-orbit;
  @include foundation-pagination;
  @include foundation-progress-bar;
  @include foundation-slider;
  @include foundation-sticky;
  @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  @include foundation-tabs;
  @include foundation-thumbnail;
  @include foundation-title-bar;
  @include foundation-tooltip;
  @include foundation-top-bar;
}

and in my main.js is:

require("../stylesheets/style.scss");

Any information would be fantastic thanks.

I installed foundation-sites with npm install foundation-sites and it is in my node_modules

Issue Analytics

State:
Created 8 years ago
Comments:8 (1 by maintainers)

Top GitHub Comments

22reactions

timaschewcommented, Feb 13, 2016

Lol 🙀 , it took me also so much time to figure out that foundation 6 doesn’t expose any modules by default anymore. You need to include either @include foundation-everything; or all the modules like written here in the docs: http://foundation.zurb.com/sites/docs/sass.html#adjusting-css-output

So I just created this file and import it: https://github.com/timaschew/r3-foundation-boilerplate/blob/master/src/styles/foundation.scss

I’ve created a boilerplate project, if you want to see the whole setup: https://github.com/timaschew/r3-foundation-boilerplate

0reactions

jhnnscommented, Jun 26, 2016

Thx for sharing this @timaschew

Top Results From Across the Web

7 Ways to Make Your Foundation Look Like a Second Skin

First, sop up excess oil with blotting papers. Then, look to a featherweight translucent powder to seal in foundation and prevent unwanted sheen ......

10 common foundation mistakes that are ruining your makeup

These common foundation mistakes can ruin your makeup. Here, top makeup artists reveal how to fix foundation mistakes and how to apply ...

5 TIPS TO FIND YOUR FOUNDATION SHADE - YouTube

Copy link. Info. Shopping. Tap to unmute. If playback doesn't begin shortly, try restarting your device. Your browser can't play this video.

Can't seem to get Foundation types to work in Linux - Using Swift ...

I'm trying to make my iOS/MacOS lib Linux compatible. $ swift -lFoundation Welcome to Swift version ... Can't seem to get Foundation types...

Why is your foundation separating on your face and how to fix it?

If you have no problem with your foundation after prepping your skin as mentioned in the previous step, you probably don't need a...