Ошибка Webpack 4 - Ошибка разбора модуля: неожиданный символ '@'

Question

Я пытаюсь создать приложение реагирования и получаю сообщение об ошибке из веб-пакета: «ОШИБКА в ./src/App.css 1: 0 Не удалось выполнить синтаксический анализ модуля: неожиданный символ« @ »(1: 0) для обработки этого типа файла необходим соответствующий загрузчик, в настоящее время загрузчики не настроены для обработки этого файла. ' Первая строка в приложении. css, где возникает ошибка, такова: @import url('https://fonts.googleapis.com/css?family=Alata|Comfortaa:400,600,700|Roboto&display=swap'); Я использую url-загрузчик, о котором я узнал в теме, которую я читал в Интернете, которая должна была исправить это.

А здесь мой полный 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
    }
};

Answer 1

Похоже, вы используете SASS внутри файла. css (@import url(foo) недействительно CSS, это SASS, поэтому Webpack не знает, как обработать эту строку). Поскольку вы пытаетесь скомпилировать файл SASS, вам необходимо настроить сборку Webpack для обработки файлов этого типа. Вы должны установить плагин sass-loader и добавить для него конфигурацию.

См. Плагин README https://github.com/webpack-contrib/sass-loader

Кроме того, вы должны переименовать свой src/App.css в src/App.scss, чтобы Webpack знал, как использовать плагин sass-loader для этого файла.