sass-loader: sass-loader creating broken paths in sourcemap
Hey all, I’m stumped, can anyone help? Sourcemaps are pointing at broken paths

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)
I tested without
resolve-url-loaderand there are two parts onlyC:\...C:\...or one when I removepostcss-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.tsfor 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 inpostcss-loaderI added inv2.0.0😅. Thx I close the issue here and fix it inpostcss-loaderas 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 bynpm i -D webpack-contrib/css-loaderFeedback 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 bypostcss-loader, thereforecss-loaderdoesn’t have any effect on the map anymore