簡體   English   中英

模塊解析失敗:意外字符'@'您可能需要一個合適的加載器來處理此文件類型。(Webpack:4.4.0)

[英]Module parse failed: Unexpected character '@'You may need an appropriate loader to handle this file type.(Webpack : 4.4.0)

我在遷移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")
          })
        ]
      };
    };

替換它

{
  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

您可以在CSS文件中嘗試不同的URL,而不是

src:url(“./ alter.ttf”)

試試這個:

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

或這個:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM