Webpack выдает мне ошибку "@ font-face {^ неожиданный токен"

Question

my css файл содержит потрясающие значки и шрифты

, и css написано правильно, но веб-пакет выдает ошибку на фотографии выше "@ font-face {^ неожиданный токен "здесь мой webpack.config

    const path = require('path')
    const webpack = require('webpack')
    const HtmlWebPackPlugin = require("html-webpack-plugin")
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const WorkboxPlugin = require('workbox-webpack-plugin')
    const IconFontPlugin = require('icon-font-loader').Plugin;
    const font=require('font-awesome/css/font-awesome.css')

    module.exports = {
        entry: "./src/js/index.js",
        mode: 'production',
        output: {
            libraryTarget: 'var',
            library: 'Client'
        },
        module: {
            rules: [
                {
                    test: '/\.js$/',
                    exclude: /node_modules/,
                    loader: "babel-loader"
                },
{
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
              },
                {
                    test:  /\.scss$/,
                    use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','icon-font-loader' ]
                },
                {
                    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=application/font-woff"
                }, {
                    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=application/font-woff"
                }, {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=application/octet-stream"
                }, {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "file"
                }, {
                    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=image/svg+xml"
                 },



            {test: /\.(png|jpe?g|gif)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[sha512:hash:base64:7].[ext]',
                }
            }
            ],
        }
    ],

        },

        plugins: [
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html",
            }),
            new MiniCssExtractPlugin({filename: '[name].css'}),
            new WorkboxPlugin.GenerateSW(),
            new IconFontPlugin()
        ]
    }

, а вот css первая строка, которая вызывает проблему, но редактор кода vs ничего не говорит о синтаксисе ошибка здесь:

   @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Answer 1

в вашей конфигурации веб-пакета нет правил для .css файлов, только .scss файлов; добавьте отдельное css правило для CSS, например, из библиотек, которые вы используете, или добавьте .css рядом с .scss, чтобы он мог обрабатывать оба;

---

edit: на самом деле ваш webpack-prod.js смертельно не в форме. несколько ошибок;

• загрузчик, который вы используете для шрифтов, должен быть переписан
• удалить неиспользуемый импорт в начале файла (не- js импорт приведет к выполнению)
• вы бы смешали плагины и загрузчик в rule секции
• Честно говоря, я пытался исправить, но было слишком много ошибок одна за другой, которые разочаровывают работать: (

В любом случае, вот немного более подходящая конфигурация для продолжения вашего пути отладки (не более @ font-face error:)

const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
const IconFontPlugin = require('icon-font-loader');


module.exports = {
  entry: "./src/js/index.js",
  mode: "production",
  output: {
    libraryTarget: "var",
    library: "Client"
  },
  module: {
    rules: [
      {
        test: "/.js$/",
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "node-sass"]
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },

      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },

      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[sha512:hash:base64:7].[ext]"
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({ filename: "[name].css" }),
    new WorkboxPlugin.GenerateSW(),
    new IconFontPlugin()
  ]
};