Reputation: 1362
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
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