Problem Summary
I'm trying to create source maps for my scss files. Webpack runs and compiles scss and js fine in the setup below, but the generated js/css files lack any source maps at all no matter what I try. I've searched around for two days looking for an answer, but my config code seems solid enough. Any idea why scss source maps wouldn't be generated at all? I need them to pickup the scss partials as well.
All the sourceMap: true
options I've added don't seem to do anything. devtool: 'source-map'
is the same, no difference. I've tried adjusting the scss entry config to import all .scss files not just the *-main.scss files, but I was met with the same result, nothing.
webpack.config.js:
const path = require('path');
const entry = require('webpack-glob-entry');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
entry: entry('./Pages/Themes/**/Javascript/*.js', './Pages/Themes/**/Scss/*-main.scss'),
mode: 'development',
output: {
path: path.resolve(__dirname, 'wwwroot/bundles/js/'),
filename: '[name].bundle.js',
},
watch: true,
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
sourceMap: true,
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer'),
require('cssnano')
],
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
],
}
]
},
plugins: [
new MinifyPlugin(),
new MiniCssExtractPlugin({
filename: '../css/[name].css',
sourceMap: true
})
]
};
The code above outputs like so:
I had the same problem. I solved it with the following configuration.
devtool: 'source-map',
module: {
rules: [
{
test: /\.(sa|c|sc)ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
}
]
}
I hope it helps you Regards.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.