create-react-app sass sourcemaps not working

Sass sourcemaps shows only on yarn build

Can we have sourcemaps enabled by default in development ! yarn start

Environment

Node: v11.1.0 yarn: v1.12.1 npm: v6.4.1 Chrome: v70

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[zaderac]

You can override the configuration by installing CRACO (https://github.com/sharegate/craco) in connection with the attached config files. Please note that this will enable sourcemaps in all circumstances, also in production builds:

craco.config.js

const sassSourcemapsPlugin = require("./craco-plugin-sass-sourcemaps");

module.exports = {
    plugins: [
        { plugin: sassSourcemapsPlugin }
    ]
};

craco-plugin-sass-sourcemaps.js

module.exports = {
    overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
        function traverse(obj, callback) {
            if (Array.isArray(obj)) {
                obj.forEach(item => traverse(item, callback));
            } else if ((typeof obj === 'object') && (obj !== null)) {
                Object.keys(obj).forEach(key=>{
                    if (obj.hasOwnProperty(key)) {
                        callback(obj, key);
                        traverse(obj[key], callback);
                    }
                })
            }
        }

        traverse(webpackConfig, (node, key) => {
            if (key === "loader") {
                if (
                    (node[key].indexOf("sass-loader") !== -1) ||
                    (node[key].indexOf("postcss-loader") !== -1) ||
                    (node[key].indexOf("css-loader") !== -1)
                ) {
                    if (node.options) {
                        node.options.sourceMap = true;
                    }
                }
            }
        })

        return webpackConfig;
    }
};