Sourcemaps not being generated

[katiequakie]

I'm currently using the media query plugin in a project with scss and a webpack confguration. I was always able to detect the source of css in the devtools via sourcemaps like this:

After installing and configuring the media query plugin, clearing the system cache and restarting filewachters, it successfully splits the output css into seperate chunks, but it doesn't ship their sourcemaps:

Here is what my webpack.config.js looks like:

const webpack = require('webpack');
const path = require('path');
const dist_path = __dirname + '/web/dist';
const isProd = (process.env.NODE_ENV.indexOf('production') !== -1 ? true : false);
const type = process.env.NODE_TYPE;

// Plugins
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MediaQueryPlugin = require('media-query-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const build = {
    'core' : {
        'entry': './web/scss/main.scss',
        'output': 'core/'
    },
    'email' : {
        'entry': './web/scss/email.scss',
        'output': 'email/'
    },
    'email-inline' : {
        'entry': './web/scss/email-inline.scss',
        'output': 'email-inline/'
    }
};

const extractPlugin = new MiniCssExtractPlugin({
    filename: build[type].output + 'css/[name].css',
    allChunks: true
});

const cleanPath = dist_path + '/' + build[type].output;

module.exports = {
    entry: build[type].entry,
    output: {
        path: dist_path,
        filename: './' + build[type].output + '/build.js',
        publicPath: '/dist',
        chunkLoading: false,
        wasmLoading: false,
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: !isProd
                        }
                    },
                    MediaQueryPlugin.loader,
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: !isProd
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: !isProd,
                            sassOptions: {
                                indentWidth: 4,
                                includePaths: [path.resolve(__dirname, "./node_modules/compass-mixins/lib")]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(jpe?g|gif|png|svg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader',
                exclude: /node_modules/,
                options: {
                    limit: 20000,
                    name: build[type].output + 'images/[hash]-[name].[ext]',
                    publicPath: '../../'
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader',
                exclude: /node_modules/,
                options: {
                    limit: 20000,
                    name: build[type].output + 'fonts/[name].[ext]',
                    publicPath: '../../'
                }
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: (isProd ? false : 'source-map'),
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [cleanPath]
        }),
        new MediaQueryPlugin({
            include: [
                'main'
            ],
            queries: {
                '(min-width: 480px)': 'desktop',
                '(min-width: 480px) and (max-width: 640px)': 'desktop',
                '(min-width: 600px)': 'desktop',
                '(min-width: 641px)': 'desktop',
                '(min-width: 641px) and (max-width: 767px)': 'desktop',
                '(min-width: 768px)': 'desktop',
                '(min-width: 768px) and (max-width: 1023px)': 'desktop',
                '(min-width: 768px) and (max-width: 1439px)': 'desktop',
                '(min-width: 1024px)': 'desktop',
                '(min-width: 1024px) and (max-width: 1279px)': 'desktop',
                '(min-width: 1280px)': 'desktop',
                '(min-width: 1280px) and (max-width: 1439px)': 'desktop',
                '(min-width: 1440px)': 'desktop',
                '(min-width: 1440px) and (max-width: 1699px)': 'desktop',
                '(min-width: 1700px)': 'desktop',
                'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)': 'desktop',
                'print': 'print',
            }
        }),
        extractPlugin
    ],
    watch: (type == 'core' && !isProd ? true : false),
    watchOptions: {
        aggregateTimeout: 500,
        ignored: /node_modules/
    },
    stats: 'normal'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        })
    ])
}

How can I get my sourcemaps back? Does it maybe have to do something with the loaders being ignored as stated in Issue #18 (See #18 (comment))?

[katiequakie]

Update: As a workaround, I deactivated the plugin in my local enviroment, which fixed the issue as stated above. But it would be nice if there was another solution since I find it cumbersome to always be cautious about not checking in the changes and shelving them as soon as I have to change somehing in the plugin configuration.