Issue with rendering fonts and loading css files with require in the same project

webpack.js

// loaders (just the related ones) when icon fonts work but require('./file.css') don't

loaders: [
  // ...
  {
    test: /\.scss$/, // this is here just for reference. I got no issues with sass files
    loaders: ['to-string-loader', 'css', 'sass']
  },
  {
    test: /\.css$/,
    loader: 'style!css' // or 'raw'
  },
  {
    test: /\.(svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file?name=fonts/[name].[hash].[ext]?'
  }
  // ...
]

//-----------------------------------

// an entry file (main.js)

// 1. these files include icon fonts
// correct - loads fonts correctly when using 'style!css'
// wrong - fonts don't render when using 'raw'
require('../node_modules/leaflet/dist/leaflet.css');
require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/open-sans-fontface/open-sans.css');
require('./fonts/index.css');

// 2. this require in a third party library
// wrong - it returns {} when using 'style!css'
// correct - returns valid string when using 'raw"
const myDpStyles: string = require('./my-date-picker.component.css');