Unexpected character '@' in @import at webpack config

Question

So right now I am having the issue I set up my webpack config as such

var webpack = require('webpack');
var path = require('path');

var parentDir = path.join(__dirname, '../');

module.exports = {
  entry: [
    path.join(parentDir, 'index.js')
  ],
module: {
   rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.less$/,
      loaders: ["style-loader", "css-loader", "less-loader"]
    }, {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader?limit=100000'
    }]
  },
    output: {
    path: parentDir + '/dist',
    filename: 'bundle.js'
  },
    devServer: {
    contentBase: parentDir,
    historyApiFallback: true
  }
}

The error that I am getting is

Module parse failed: Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
|  *
|  */
| @import url(https://fonts.googleapis.com/css? 
family=Lato:400,700,400italic,700italic&subset=latin);/*!

I know I need to add a rule for this import I am just not sure which kind I am new to webpack and can't find anything referencing this type, also this @import exists in the semantic-ui-css package

Answer 1

Adding this bit to modules in the config file seemed to do the trick:

{
  test: /\.css$/,
  use: [
    'to-string-loader',
    'css-loader',
    'resolve-url-loader'
  ]
}