sass-loader: sass-loader creating broken paths in sourcemap

Hey all, I’m stumped, can anyone help? Sourcemaps are pointing at broken paths image

See how it’s doubling up the paths, some with forward slash, some with backslash? I’m on Windows…

When I replace sass-loader with just css-loader, or even post-css-loader + css-loader, sourcemaps work, so that’s why I think it’s sass-loader

Not sure what else will be helpful, so here’s the full webpack config:

const path = require('path');
const webpack = require('webpack');

module.exports = (env) => {
  const isProduction = env === 'production';

  const config = {
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
      }
    },
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'app.js',
      publicPath: 'http://localhost:8080/'
    },
    devtool: isProduction ? '' : 'cheap-module-eval-source-map',
    module: {
      rules: [{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      }, {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: { sourceMap: true, importLoaders: true } }, // ,
          { loader: 'postcss-loader', options: { sourceMap: 'inline' } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      }, {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      }, {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(isProduction ? 'production' : '')
        }
      })
    ]
  };

  return config;
};

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 26 (10 by maintainers)

Most upvoted comments

I tested without resolve-url-loader and there are two parts only C:\...C:\... or one when I remove postcss-loader.

What can I do to force using relative routes to my source files not absolute? It specifies relative paths like src/app/some-file.ts for my TypeScript files but for scss files I have absolute paths and it’s really inconvenient to look at file names in the Chrom dev tool.

I see now, likely need to remove the path.resolve() part in postcss-loader I added in v2.0.0 😅. Thx I close the issue here and fix it in postcss-loader as soon as possible

{ loader: 'style-loader', options: { sourceMap: true } }

It’s on master (css-loader) now and a release should be underway, yes it’s a known issue if you have a few minutes, you could try if it works for you by npm i -D webpack-contrib/css-loader

Feedback would be appreciated 😛

@Stephen2 https://github.com/webpack-contrib/css-loader/pull/532

⚠️ If you use { loader: 'postcss-loader', options: { sourceMap: 'inline' } } the source map is inlined in the CSS as an annotation comment by postcss-loader, therefore css-loader doesn’t have any effect on the map anymore