Closed
Description
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;
};