javascript - 如何不使用 Webpack 解析路径？

Question

我正在使用 Webpack 和 sass-loader、css-loader 和 url-loader 开发一个 ReactJs 项目。

我要 不解决字体路径并保持它在 SASS 文件中的设置方式。

问题:

如果我调用绝对路径(即: http://fonts.com/my-font.eot 或 /path/to/my-font.eot )，则无法解析路径。

但是，如果我使用相对路径(即: my-font.eot 或 path/to/my-font.eot )，url-loader 会尝试解析路径。

就我而言，我需要使用相对路径(即使它会生成 404 错误)。

我尝试了什么:

我试图排除 url-loader 中的所有字体扩展名，但 Webpack 不知道如何处理这种类型的文件，即使该文件可能不存在。

这是我得到的错误:

Module parse failed: C:....\fonts\my-font.eot Unexpected character ' ' (1:1) You may need an appropriate loader to handle this file type.

我还尝试禁用 css-loader 的“url”选项，但绝对没有任何 react 。我想很有可能我没有正确添加选项:

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

这是我当前的代码的样子:

module: {
    loaders: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.scss$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'path/dist/[name].[hash:8].[ext]'
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      ...
    ]
  },
  ...
}

Answer 1

这个问题可能有点老了，但我仍然想更正答案。

当你想使用数组语法时，你基本上定义了每个加载器的所有选项。为此，您必须为数组中的加载程序使用一个对象。所以而不是

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

你必须写

{
    test: /\.scss$/,
    loaders: [
         "style-loader", 
         {
            loader:'css-loader',
            options: {
                 url: false
            }
         },
         "sass-loader"],

},