Font urls does not work when using sourceMap

[hoanguyen311]

webpack configuration:

modules: {
    loaders: [{
        test: /\.scss$/,
        loader: ['style', 'css?sourceMap', 'postcss',
            'sass?sourceMap'
        ].join('!')
    }, {
        test: /\.(mp4|ogg|svg|eot|ttf|woff|woff2|jpg|png)$/,
        loader: 'file-loader'
    }]
}

styles/fonts.scss

@font-face {
  font-family : "foundation-icons";
  font-style  : normal;
  font-weight : normal;
  src         : url(foundation-icons.eot);
  src         : url(foundation-icons.eot?#iefix) format("embedded-opentype"),
                url(foundation-icons.woff) format("woff"),
                url(foundation-icons.ttf) format("truetype"),
                url(foundation-icons.svg#fontcustom) format("svg");
}

And the font icons doesn't work

It's ok after I removed sourceMap option of css-loader

[acidicX]

duplicate of #232 I think

[blowsie]

Only difference which this ticket is the source is sass and not css

[alexander-akait]

@hoanguyen311 Error still exists?

[janvesel]

Yes I have same issue.

I made a workaround by:

• separating css that loads fonts into separate file,
• excluded this file from my regular scss loader (with sourceMap option set to true)
• added additional loader (that includes only this file and without source files and without sourceMap),
• imported new fonts file into app.js.

{
    test    : /\.scss$/,
    loader  : isProd ? ExtractTextPlugin.extract(['css-loader', 'sass-loader']) : 'style-loader!css-loader?sourceMap!sass-loader?sourceMap',
    include : [paths.src],
    exclude : [`${paths.src}/assets/styles/fonts.scss`]
  },
  {
    test    : /\.css$/,
    loader  : isProd ? ExtractTextPlugin.extract(['css-loader', 'sass-loader']) : 'style-loader!css-loader!sass-loader',
    include : [`${paths.src}/assets/styles/fonts.css`]
  }

[alexander-akait]

@janvesel your use webpack v1?

[janvesel]

@evilebottnawi I use webpack v1.14

[alexander-akait]

@janvesel can your upgrade config to v2 and tests again?

[Kaijun]

@evilebottnawi webpack 2/3 doesn't work either.

[alexander-akait]

@Kaijun can your create minimum reproducible test repo?

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[dgesteves]

I still have that problem, any solution?

[janvesel]

@EstevesDiogo I created a workaround by adding another loader for file that load fonts only and for that I didn't use sourceMap

{
    test    : /\.scss$/,
    loader  : isBuild ? ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader']) : 'style-loader!css-loader?sourceMap!postcss-loader?sourceMap!sass-loader?sourceMap',
    include : [path-to-assets]
  },
{
    test    : /\.css$/,
    loader  : isBuild ? ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader']) : 'style-loader!css-loader!sass-loader',
    include : [`path-to-assets/fonts.css`]
  },