How to import Foundation's SCSS with Webpack 2?

Question

I'm trying to use Foundation with Webpack 2 using the sass-loader.

I'm importing Foundation with

@import 'foundation-sites/scss/foundation';

And get an import error as it can't find foundation. Reading the docs for sass-loader suggests that I should actually use:

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

Which fixes the import error but creates a new problem.

The error I receive is

ModuleBuildError in Module build failed: @import "normalize"; ^ File to import not found or unreadable: normalize

File to import not found or unreadable: normalize Parent style sheet: ... /node_modules/foundation-sites/scss/foundation.scss in ... /node_modules/foundation-sites/scss/foundation.scss (line 9, column 1)

In my webpack config file I'm also using the ExtractTextPlugin as below:

module: {
    rules: [
        {
                test: /\.(scss|css)$/,
                loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: [
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader',
                        query: {
                            includePaths: [path.resolve(__dirname, "./node_modules")]
                        }
                    }
                ]
            })
        }
    ]
},
resolve: {
    modules: ['node_modules']
}

I believe this comes from the webpack isn't resolving to the node_modules folder for some reason but unsure where the cause comes from.

Answer 1

Try this, as that the only thing that worked for me.

new webpack.LoaderOptionsPlugin({
    options: {
        context: '/', // <- putting this line right under "options" did the trick
        sassLoader: {
            includePaths: [
                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
            ]
        }
    }
})