Converting gatsby project from css to scss, having issues with lost grid preprocessing

I'm taking a gatsby starter project that uses Lost grid and converting from css to scss for some gains. This is the starter project: https://github.com/wpioneer/gatsby-starter-lumen

Essentially, I'm converting the project to scss because I much prefer it's structure and would like to move away from all the css files. For now, I simply:

Installed sass-loader, scss, and node-sass
Renamed all the css files to scss files

And modified gatsby-node.js to the following:

var rucksack = require('rucksack-css')
var lost = require("lost")
var cssnext = require("postcss-cssnext")

exports.modifyWebpackConfig = function(config, env) {
    config.merge({
        postcss: [
            lost(),
            rucksack(),
            cssnext({
                browsers: ['>1%', 'last 2 versions']
            })
        ]
    })

    config.loader('svg', {
       test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: 'file-loader',
    })

    config.loader('sass', {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader',
    })

    return config
};

Unfortunately, while this does allow me to build and run the project using scss, I've noticed that my sweet Lost grid has disappeared. After investigation, I notice that .sidebar is still reading as lost-column: 1/3 in the browser (for example), so I can see that the preprocessing which is crucial for Lost grid didn't happen.

Honestly, this is probably an issue outside of Lost grid, and rather an issue with how I've constructed the gatsby-node.js, but I would appreciate any insight into what I'm missing. I don't mind uploading a scss/lost starter project for gatsby once this issue is resolved.

Solution

Solved.

In node_modules/gatsby/dist/utils/webpack.config.js, I changed

    // CSS modules
    config.loader('cssModules', {
      test: /\.module\.css$/,
      loaders: ['style', cssModulesConfDev, 'postcss']
    });
    config.loader('lessModules', {
      test: /\.module\.less/,
      loaders: ['style', cssModulesConfDev, 'less']
    });
    config.loader('sassModules', {
      test: /\.module\.(sass|scss)/,
      loaders: ['style', cssModulesConfDev, 'sass']
    });

to:

    // CSS modules
    config.loader('lessModules', {
      test: /\.module\.less/,
      loaders: ['style', cssModulesConfDev, 'less']
    });
    config.loader('sassModules', {
      test: /\.module\.(sass|scss)/,
      loaders: ['style', cssModulesConfDev, 'sass']
    });
    config.loader('cssModules', {
      test: /\.module\.css$/,
      loaders: ['style', cssModulesConfDev, 'postcss']
    });

I'll probably see what the gatsby folks see about making this change permanent.