webpack3 css,webpack 3 - CSS Modules, SASS + Webpack3 + React - Stack Overflow

I am struggling with setting up my webpack config properly... I tried many things without result. When I am trying to compile bundle I receive loads of errors regarding path to .svg files however the path is ok.

> ERROR in ./client/components/home-page/SocialMediaAuthentication.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './assets/icons/facebook.svg' in '/Users/elegancko/Projects/YesChef/client/components/home-page'

at factoryCallback (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/Compilation.js:276:40)

at factory (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:235:20)

at resolver (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:60:20)

at asyncLib.parallel (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:127:20)

at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3694:9

at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:356:16

at iteratorCallback (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:934:13)

at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:840:16

at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3691:13

at apply (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:21:25)

at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:56:12

at resolvers.normal.resolve (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:119:22)

at onError (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:65:10)

at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)

at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)

at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)

at /Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4

at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)

at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)

at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)

at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:144:11)

at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:249:35)

at resolver.doResolve.createInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)

at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

at afterInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:168:10)

@ ./client/components/home-page/SocialMediaAuthentication.js 11:0-43

@ ./client/components/home-page/ForgotPasswordForm.js

@ ./client/App.js

@ ./client/index.js

Does anyone know how to fix it? Please find the code of my webpack config below

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractWebpackPlugin = require('extract-text-webpack-plugin')

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({

template: path.join(__dirname, '/client/index.html'),

filename: 'index.html',

inject: true

})

const ExtractWebpackPluginConfig = new ExtractWebpackPlugin({

filename: 'index.css',

allChunks: true

})

module.exports = {

entry: './client/index.js',

output: {

path: path.join(__dirname, '/build'),

publicPath: '/',

filename: 'bundle.js'

},

devServer: {

contentBase: './client',

hot: true,

historyApiFallback: true,

port: 3000

},

module: {

loaders: [

{

enforce: 'pre',

test: /\.(js|jsx)$/,

exclude: /(node_modules|bower_components)/,

loader: 'standard-loader',

},

{

test: /\.(js|jsx)$/,

exclude: /node_modules/,

loaders: ['react-hot-loader/webpack', 'babel-loader']

},

{

test: /\.scss$/,

loader: ExtractWebpackPlugin.extract(['css-loader', 'sass-loader']),

},

{

test: /\.css$/,

exclude: [/\.global\./, /node_modules/],

loader: ExtractWebpackPlugin.extract(

{

fallback: 'style-loader',

use: [

{

loader: 'css-loader',

options: {

importLoaders: 1,

modules: true,

autoprefixer: true,

minimize: true,

localIdentName: '[name]__[local]___[hash:base64:5]'

}

}

]

})

},

{

test: /\.css/,

include: [/\.global\./, /node_modules/],

loader: ExtractWebpackPlugin.extract(

{

fallback: 'style-loader',

use: ['css-loader']

})

},

{

test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/,

use: [

{

loader: 'url-loader',

options: {

limit: 10000,

name: 'font/[name].[ext]',

},

},

],

},

{

test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,

exclude: /\.glyph.svg/,

use: [

{

loader: 'url-loader',

options: {

limit: 6000,

name: 'image/[name].[ext]',

},

},

],

},

{

test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/,

exclude: /\.glyph.svg/,

use: [

{

loader: 'file-loader',

options: { name: 'audio/[name].[ext]' },

},

],

},

]

},

plugins: [

HtmlWebpackPluginConfig,

ExtractWebpackPluginConfig

]

}

I was looking at many tutorials how to set webpack properly to use SASS + CSS modules + Webpack (I am not using Create React App package)

its like looking for svg in different path

And paths