模块解析失败：意外字符'@'。您可能需要一个适当的加载器来处理此文件类型。（Webpack: 4.4.0）

Question

在迁移webpack时，我遇到了以下错误。下面是我的webpack.config.js文件。 我还附上了错误截图。

我已经添加了sass-loader、css-loader和style-loader。如果我做错了什么，请告诉我。

不确定错误是什么...感谢提前帮助 Webpack.config.js

 const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const CleanWebpackPlugin = require("clean-webpack-plugin");

    const settings = {
      distPath: path.join(__dirname, "dist"),
      srcPath: path.join(__dirname, "src")
    };


    function srcPathExtend(subpath) {
      return path.join(settings.srcPath, subpath)
    }

    module.exports = (env, options) => {
      const isDevMode = options.mode === "development";

      return {
        devtool: isDevMode ? "source-map" : false,
        resolve: {
          extensions: [".ts", ".tsx", ".js"],
        },
        module: {
          rules: [
            {
              test: /\.tsx?$/,
              use: ["babel-loader", "ts-loader", "tslint-loader"]
            },
            {
              test: /\.scss$/,
              use: [
                "style-loader",
                {
                  loader: "css-loader",
                  options: {
                    sourceMap: isDevMode
                  }
                },
                {
                  loader: "postcss-loader",
                  options: {
                    plugins: [
                      require("autoprefixer")()
                    ],
                    sourceMap: isDevMode
                  }
                },
                {
                  loader: "sass-loader",
                  options: {
                    sourceMap: isDevMode
                  }
                }
              ]
            },
            {
              test: /\.(ttf|eot|woff|woff2)$/,
              use: {
                loader: "file-loader",
                options: {
                  name: "fonts/[name].[ext]",
                },
              },
            },
            {
              test: /\.(jpe?g|png|gif|svg|ico)$/i,
              use: [
                {
                  loader: "file-loader",
                  options: {
                    outputPath: "assets/"
                  }
                }
              ]
            },
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: [
                'babel-loader'
              ]
            }

          ]
        },
        plugins: [
          new CleanWebpackPlugin([settings.distPath], {
            verbose: true
          }),
          new HtmlWebpackPlugin({
            template: srcPathExtend("index.ejs")
          })
        ]
      };
    };

- Nagesh Fultambkar

Answer 1

替换这个

{
  test: /\.(ttf|eot|woff|woff2)$/,
     use: {
       loader: "file-loader",
         options: {
         name: "fonts/[name].[ext]",
     },
  },
}

使用这段代码

{
  test: /\.(woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000'
}

首先安装url-loader包

- Rajendran Nadar

Answer 2

在你的CSS文件中，你可以尝试不同的URL，而不是

src: url("./alter.ttf")

试试这个：

src: url("/alter.ttf");

或者这样：

src: url("/images/alter.ttf");

- Israel