title: Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type
body: <p>I'm having some issues. I keep getting this error</p>
  <blockquote>
  <p>Module parse failed: Unexpected character '@' (1:0) You may need an
  appropriate loader to handle this file type, currently, no loaders are
  configured to process this file. See
  <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a>
  @import url(&quot;https://cloud.typography.com/7374818/6819812/css/fonts.css&quot;);</p>
  </blockquote>
  <p>I've tried some of the suggested solutions I've found online and none seems to work.
  This is what my Webpack config looks like</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const devMode = process.env.NODE_ENV !== 'production';
  
  module.exports = {
    entry: {
      main: path.resolve(__dirname, './src/App.tsx'),
    },
  
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'public'),
      sourceMapFilename: &quot;[name].js.map&quot;
    },
  
    externals: {
      'react': 'React',
      'react-dom': 'ReactDOM',
    },
  
    devtool: 'source-map',
  
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          include: [
            path.resolve(__dirname, './src'),
          ],
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
          },
        },
        {
          test: /\.(scss|css)$/,
          include: path.resolve(__dirname, './src'),
          use: [
            MiniCssExtractPlugin.loader,
            'style-loader',
            'css-loader',
            {
              loader: &quot;postcss-loader&quot;,
              options: {
                plugins: () =&gt; [
                  require(&quot;autoprefixer&quot;)()
                ],
              },
            },
            'sass-loader',
          ],
        },
        {
          test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/,
          loader: 'url-loader',
          options: {
            limit: 100000,
          }
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx', 'json', 'ts', 'tsx', '.scss'],
      alias: {
        src: path.resolve(__dirname, './src/'),
      },
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './public',
      port: 3030,
      open: true,
      compress: true,
      hot: true,
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
      }),
      new CleanWebpackPlugin(),
      new webpack.HotModuleReplacementPlugin(),
    ],
  };
  
  </code></pre>
  <p>The component looks like this. <code>uilib</code> is a local dependency I'm linking using <code>yarn link</code></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Header, Footer } from 'uilib';
  import 'uilib/index.css';
  
  export const App: React.FC&lt;{}&gt; = () =&gt; (
    &lt;&gt;
      &lt;Header/&gt;
      &lt;div&gt;Hello in oct&lt;/div&gt;
      &lt;Footer/&gt;
    &lt;/&gt;
  );
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root'),
  );
  
  </code></pre>
  <p>The uilib/index.css looks like this</p>
  <pre><code>@import url(&quot;https://cloud.typography.com/7374818/6819812/css/fonts.css&quot;);
  .header {
    height: 70px; 
  }
  </code></pre>