svg import in scss module file not found after webpack

Question

I can't import background image through scss file in my react project using webpack. I followed all the recent advice on stackexchange but to no avail. I get this error message when I try to import images through either scss or css files:

Module not found: Error: Can't resolve 'marker.svg'

in the scss file

.marker {
  background-image: url('./marker.svg');

scss config in webpack

{
  test: /\.s[ac]ss$/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'css-loader',
    options: {
      localIdentName: '[hash:base64:5]',
      modules: true,
      sourceMap: IS_DEV
    }
  }, {
    loader: 'postcss-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'sass-loader',
    options: {
      sourceMap: IS_DEV,
    }
  }]
},

image config in webpack

{
  test: /\.(svg|png|jpg)$/,
  use: {
    loader: 'url-loader',
    loader: 'svg-url-loader',
    loader: 'file-loader',
    loader: 'resolve-url-loader',
  },
},

devserver config

devServer: {
  historyApiFallback: true,
  hot: true,
  contentBase: dest,
  compress: true,
  port: 9000,
  publicPath: 'http://localhost:9000/dest',
},

Is it the devserver? css-module? sourceMap? I have trouble importing image files in css as well. Please help

install and use resolve-url-loader before sass-loader – user3634772 Aug 05 '17 at 04:25 — user3634772, Aug 05 '17 at 04:25
old post, but did you remember the solution to this? – Mese Oct 22 '19 at 14:07 — Mese, Oct 22 '19 at 14:07

score 5 · Answer 1 · answered Jul 01 '19 at 14:14

If you are using css-loader ^3.0.0 you should set url: false (marked with "---->"):

    ...
    test: /\.(scss|sass)$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader', options: {
----->      url: false,
            importLoaders: 2,
            modules: {
              mode: 'local',
              localIdentName: isProduction ? '[hash:base64:5]' : '[local]_[hash:base64:5]'
            },
          },
        },
        { loader: 'postcss-loader' },
        { loader: 'sass-loader', options: {
            includePaths: ['./src']
          }
        },
      ],
    })
  },
  {
    test: /\.(svg|png)$/,
    use: {
      loader: 'url-loader', options: {
        name: 'assets/[hash].[ext]',
        limit: 5000,
      },
    }
  },
 ...

score 1 · Answer 2 · answered Aug 05 '17 at 04:27

use resolve-url-loader before sass-loader like so

{
  test: /\.s[ac]ss$/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'css-loader',
  }, {
    loader: 'postcss-loader',
  },
  { loader: 'resolve-url-loader', }
  {
    loader: 'sass-loader',
    options: {
      sourceMap: IS_DEV,
    }
  }]
},

svg import in scss module file not found after webpack

2 Answers2