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-loader
and 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.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 inpostcss-loader
I added inv2.0.0
😅. Thx I close the issue here and fix it inpostcss-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 bynpm 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 bypostcss-loader
, thereforecss-loader
doesn’t have any effect on the map anymore