This may seem like a strange request but I am working on a site in HubSpot which will automatically minify my CSS and JS files for me before serving them to the browser.

I do my development using SCSS and JS modules and compile them using WebPack. There are from time to time other developers who work on the project and much to my frustration don’t use Git/WebPack so I want to be able to upload uncompressed CSS files as it will allow them to make changes easier, and for me to see what has been changed much easier.

How can I get WebPack to compile/compress the JS as normal, but only compile and not compress the SCSS? I have looked at options of either running in DEV mode and compiling the JS, or running in PROD mode and not compiling CSS.

Here is my webpack config:

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getPublicPath = require('./compiler/publicPath');
const { entry, outputFolder, publicFolder, watch, proxyTarget, ignore } = require('./compiler/config');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = (env, argv) => {
    const dev = argv.mode === 'development';
    const minify_css = false;

    return {
        watch: true,
        entry: entry,
        output: {
            path: path.resolve(outputFolder),
            publicPath: getPublicPath(publicFolder),
            filename: '[name].js'
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
            new IgnoreEmitPlugin(ignore),
            new VueLoaderPlugin()
        ],
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
            }
        },
        module: {
            rules: [
                {
                    test: /.js$/,
                    use: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /.(sa|sc|c)ss$/,
                    use: [
                        { loader: MiniCssExtractPlugin.loader, options: { hmr: dev } },
                        { loader: 'css-loader', options: { sourceMap: dev } },
                        { loader: 'resolve-url-loader', options: { sourceMap: dev } },
                        { loader: 'sass-loader', options: { sourceMap: true, sourceMapContents: dev } }
                    ]
                },
                {
                    test: /.(gif|png|jpe?g|svg)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[path][name].[ext]'
                            }
                        },
                        {
                            loader: 'image-webpack-loader',
                            options: {
                                disable: dev, // [email protected] and newer
                            },
                        },
                    ],
                },
                {
                    test: /.(otf|eot|ttf|woff|woff2?|ico|mp4|webm|htc)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[path][name].[ext]',
                            }
                        }
                    ]
                }
            ]
        }
    }
};

Many thanks

I have spent ages pouring through documentation and trying various things with no joy. I don’t think i am even on the right track.