title: Cannot use @import in css
body: <p>Could someone help me figure out how to fix this error message i get:</p>
  
  <pre><code> &gt; Using "webpack" config function defined in next.config.js.
   ERROR  Failed to compile with 1 errors7:42:34 PM
  
   error  in C:/projects/node_modules/semantic-ui-css/semantic.min.css
  
  Module parse failed: C:\project\src\app\node_modules\next\dist\server\build\loaders\emit-file-loader.js??ref--7!C:\project\node_modules\semantic-ui-css\semantic.min.css 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&amp;subset=latin);/*!
  |  * # Semantic UI 2.2.12 - Reset
  |  * http://github.com/semantic-org/semantic-ui/
  
   @ ./pages/_document.js?entry 47:0-43
   @ multi ./pages/_document.js?entry
  </code></pre>
  
  <p>From what I gather, i do not have the right config to use a url loader in my css. But I am unsure how to get this to work. What appropriate loader do I need to handle this file type? And how do i set it up in my config file?</p>
  
  <p>Config:</p>
  
  <pre><code>    const path = require('path')
  const glob = require('glob')
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  const autoprefixer = require('autoprefixer');
  
  module.exports = {
      distDir: "../functions/next",
      webpack: (config, {dev}) =&gt; {
          // Remove minifed react aliases for material-ui so production builds work
          if (config.resolve.alias) {
              delete config.resolve.alias.react
              delete config.resolve.alias['react-dom']
          }
  
          config.module.rules.push({
              test: /\.s?css$/,
              loader: 'emit-file-loader',
              options: {
                  name: 'dist/[path][name].[ext]',
              },
          });
  
          if (!dev) {
              config.module.rules.push({
                  test: /\.scss$/,
                  use: ExtractTextPlugin.extract({
                      use: [
                          {
                              loader: 'css-loader',
                              options: {
                                  importLoaders: 2,
                                  modules: false,
                                  url: true,
                                  sourceMap: false,
                                  minimize: true,
                                  localIdentName: false
                                      ? '[name]-[local]-[hash:base64:5]'
                                      : '[hash:base64:5]',
                              },
                          },
                          {
                              loader: 'postcss-loader',
                              options: {
                                  sourceMap: true,
                                  plugins: () =&gt; [
                                      autoprefixer(),
                                  ],
                              },
                          },
                          {
                              loader: 'sass-loader',
                              options: {
                                  sourceMap: true,
                                  includePaths: [
                                      path.resolve(__dirname, 'scss'),
                                      path.resolve(__dirname, 'pages'),
                                  ],
                              },
                          },
                      ],
                  }),
              });
  
              config.plugins.push(new ExtractTextPlugin('app.css'));
          } else {
              config.module.rules.push({
                  test: /\.scss$/,
                  use: [
                      { loader: 'raw-loader' },
                      {
                          loader: 'postcss-loader',
                          options: {
                              sourceMap: 'inline',
                              plugins: () =&gt; [
                                  autoprefixer(),
                              ],
                          },
                      },
                      {
                          loader: 'sass-loader',
                          options: { sourceMap: true },
                      },
                  ],
              });
          }
  
  
          return config
      }
  }
  </code></pre>
  
  <p>I am using next.js framework.</p>