模块解析失败：意外字符'@'您可能需要适当的加载程序来处理此文件类型。（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")
          })
        ]
      };
    };

Answer 1

您可以在CSS文件中尝试使用其他网址，而不是

  

src：url（“ ./ alter.ttf”）

尝试这个：

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

或者这个：

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