Source Maps?

[JonAbrams]

Anyone figure out how to get this working with source maps?

I've tried using these configs:

const path = require('path');
const glob = require('glob');

module.exports = {
  webpack: config => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'file-loader',
        options: {
          name: 'dist/[path][name].[ext]',
        },
      },
      {
        test: /\.css$/,
        use: [
          'babel-loader',
          'raw-loader',
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              sourceMap: true,
            },
          },
          'raw-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              includePaths: ['styles', 'node_modules']
                .map(d => path.join(__dirname, d)) // eslint-disable-line no-undef
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), []),
            },
          },
        ],
      }
    );

    return config;
  },
};

But get an error when the page is loaded:

Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "/*--------------------------------------------------------------\n>>> TABLE OF CONTENTS:\n----------------------------------------------------------------\n# Variables\n    ## Colors\n    ## Structure\n    ## Elements\n    ## Select\n    ## Navbar\n# Bulma Imports\n# Layout\n    ## Content\n# Typography\n    ## Headings\n# Forms\n    ## Buttons\n# Components\n    ## Modal\n    ## Select\n# Global\n    ## Footer\n*/\n/*-…

and alas, when I inspect the DOM, it does not map to my CSS source files :(