时间戳

首页 > 解决方案 > webpack 给我错误“@font-face { ^ 意外令牌”

webpack - webpack 给我错误“@font-face { ^ 意外令牌”

问题描述

我的 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;
}

标签： webpack

解决方案

您的 webpack 配置中没有任何.css文件规则，只有.scss文件；为您使用的库中的 CSS 添加单独的 css 规则，或者在.css旁边添加.scss以让它处理两者；

编辑：实际上你webpack-prod.js是致命的变形。多个错误；

  • 您用于字体的加载器应该被重写
  • 删除文件顶部未使用的导入（非 js 导入将导致执行）
  • 您在部分中混合了插件和加载rule器
  • 老实说，我正在尝试修复，但是一个接一个地出现了太多错误，这令人沮丧:(

无论如何，这里有一些更合适的配置来继续你的调试之旅（不再有@font-face 错误:)

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()
  ]
};

推荐阅读