How to import Foundation SCSS using Webpack 2?

Question

I am trying to use Foundation with Webpack 2 using sass-loader.

I import Foundation using

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

And get the import error, because it cannot find the basis. Reading the docs for sass-loader suggests that I should use:

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

Which fixes the import error, but creates a new problem.

I get an error

ModuleBuildError in Module assembly error: @import "normalize"; ^ Import file not found or unreadable: normalize

Import file not found or unreadable: normalize Parent style sheet: ... / node_modules / foundation-sites / scss / foundation.scss in ... /node_modules/foundation-sites/scss/foundation.scss( row 9, column 1 )

In my webpack configuration file, I also use ExtractTextPlugin, as shown 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 is because the web package for some reason does not allow the node_modules folder, but I'm not sure where the reason comes from.

Answer 1

Try this as this is 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'), ] } } })