How to use css with webpack in a rails app?

Question

Following the github docs, I tried the following to include scss assets in my app:

app/javascript/styles/app.scss:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  margin: 0;
}

app/javascript/packs/application.js:

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

import React from 'react';

import '../styles/app.scss'

My webpack.config.js is the default webpack installs on rails. It is a combination of these 2 directories:

• https://github.com/rails/webpacker/tree/master/lib/install/config/loaders/core
• https://github.com/rails/webpacker/tree/master/lib/install/config/webpack

I can find the CSS config in config/loaders/sass.js:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

On doing this, I do not get any error but the stylesheet isn't imported. Serving the same file from the asset pipeline works fine.