I'm trying to generate correct source maps for an large project (using monorepo, aliases for loading files from other sibling project, and bootstrap). Below is my webpack.config.js file. Currently, it generates hit or miss source map, sometimes it generates ok (for bootstrap files for instance, the map is perfect), sometimes it points to an completly diferent file and line from the original, and sometimes, it generates even an wrong scss file map. I've tried to enable compressed: true, but it just makes everything more messy, some files it point right but most of them to the wrong line or file.
the SCSS files are compiling as it should, but the source map is hit or miss. Is there something wrong with my configuration? Any simple boilerplate for generating correct sourcemaps?
{
mode: 'none',
name: 'scss',
entry: scssFiles, // list of entries generated by function
devtool: 'source-map',
stats: 'errors-warnings',
output: {
path: path.resolve(__dirname),
filename: '[name].css'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
url: false,
minimize: false
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('autoprefixer')()
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
// outputStyle: 'compressed', // Have tried it on too.
includePaths: [
path.resolve('node_modules'),
path.resolve('node_modules/flag-icon-css/sass')
]
}
}
]
})
}]
}