如何不使用 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 不知道如何处理此类文件，即使该文件可能不存在。

这是我得到的错误：

模块解析失败：C:.... onts\my-font.eot 意外字符 ' ' (1:1) 您可能需要适当的加载程序来处理此文件类型。

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

{
    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"],

},

Answer 2

我找到了解决方案。我没有正确添加 css-loader 选项。

因为我没有找到直接使用数组语法添加选项的方法，所以我不得不切换到字符串语法。

此代码不起作用：

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

此代码有效：

{
    test: /\.scss$/,
    loader: 'style!css?url=false!sass'
}

Answer 3

我需要一种与已接受的解决方案不同的解决方案：

  /* webpackIgnore: true */
  background: url('/api/assets/?image=background.webp');

成功了。就我而言，我想跳过解析我想通过调用后端来解析的路径，因此它必须保持这样，并且不应该由 Webpack 解析。

我从

Webpack 文档

中找到了这个注释语法 /* webpackIgnore: true */。

[编辑]

当我尝试构建时，Webpack 注释被 postcss 和 cssnano 删除（我正在使用 Vue），我必须以这种形式编写它因此注释被保留并且它也通过了构建：

/*! /* webpackIgnore: true */