dmikester1
dmikester1

Reputation: 1362

Webpack 4 error - Module parse failed: Unexpected character '@'

I am trying to build a react app and am getting this error from webpack: 'ERROR in ./src/App.css 1:0 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.' The first line in App.css where the error occurs is this: @import url('https://fonts.googleapis.com/css?family=Alata|Comfortaa:400,600,700|Roboto&display=swap'); I am using the url-loader I learned about in a thread I read online that was supposed to fix it.

And here is my full web.config.js:

/* eslint-env node */

const webpack = require('webpack');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/],
                loader: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'url-loader?limit=100000',
                        options: {
                            name: '[name].[ext]',
                            limit: 1024,
                            publicPath: 'dist/assets/',
                            outputPath: 'dist/assets/'
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        // path: __dirname + '/dist',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

Upvotes: 1

Views: 3916

Answers (1)

Andrew Sinner
Andrew Sinner

Reputation: 1881

It appears you are using SASS inside of a .css file (@import url(foo) is not valid CSS, it is SASS, thus Webpack does not know to handle this line). Since you are trying to compile a SASS file, you need to configure your Webpack build to handle this type of file. You should install the sass-loader plugin and add configuration for it.

See the plugin README https://github.com/webpack-contrib/sass-loader

Additionally, you should rename your src/App.css to src/App.scss so that Webpack knows to use the sass-loader plugin for this file.

Upvotes: 1

Related Questions