Webpack “网页给我错误”@字体面{^意外标记"；

我的css文件有很棒的字体图标和字体

css写得很好，但webpack给了我上面照片中的错误“@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;
}

---

你的网页配置中没有任何关于

.css

文件的规则，只有

.scss

文件； 为css添加一个seprate css规则，就像您使用的库中的css一样，或者在

.scss

旁边添加

.css

，让它同时处理这两个问题

---

编辑：事实上你的

webpack-prod.js

已经严重变形。多个错误

• 应重新编写用于字体的加载程序
• 删除文件顶部未使用的导入（非js导入将导致执行选项）
• 您可以在

  规则

  部分混合使用插件和加载程序
• 老实说，我试图修复，但一个接一个的错误太多，这让工作很沮丧：(

无论如何，这里有一个更合适的配置来继续调试过程（不再有@font-face错误：）

const HtmlWebPackPlugin=require（“html网页包插件”）
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）
const WorkboxPlugin=require（'workbox-webpack-plugin'）
const icontplugin=require（'icon-font-loader'）；
module.exports={
条目：“./src/js/index.js”，
模式：“生产”，
输出：{
libraryTarget：“var”，
图书馆：“客户”
},
模块：{
规则：[
{
测试：“/.js$/”，
排除：/node_模块/，
加载器：“巴别塔加载器”
},
{
测试：/\.css$/i，
用法：[“样式加载器”、“css加载器”、“节点sass”]
},
{
测试：/\.scss$/,，
用法：[“样式加载器”、“css加载器”、“sass加载器”]
},
{
测试：/\.woff（\？v=\d+\.\d+\.\d+）？$/，
加载器：“文件加载器”
},
{
测试：/\.woff2（\？v=\d+\.\d+\.\d+？$/,，
加载器：“文件加载器”
},
{
测试：/\.ttf（\？v=\d+\.\d+\.\d+）？$/，
加载器：“文件加载器”
},
{
测试：/\.eot（\？v=\d+\.\d+\.\d+？$/,，
加载器：“文件加载器”
},
{
测试：/\.svg（\？v=\d+\.\d+\.\d+）？$/，
加载器：“文件加载器”
},
{
测试：/\（png | jpe？g | gif）$/i，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：“[sha512:hash:base64:7]。[ext]”
}
}
]
}
]
},
插件：[
新HtmlWebPackPlugin({
模板：“./src/index.html”，
文件名：“./index.html”
}),
新的MiniCssExtractPlugin（{filename:[name].css}），
新建WorkboxPlugin.GenerateSW（），
新的IconFontPlugin（）
]
};

我现在添加了css加载器，但仍然得到完全相同的结果error@maimohamed将css和样式加载器移到第一个，在字体图标minicsExtractPlugin.loader'、'icon-font-loader'、'css-loader'、'sass-loader']之前，这是@maimohamed项目的副本。问题在这一行：

const font=require（'font-awesome/css/font-awesome.css'））

删除它，它将跨越此错误