如何不使用Webpack解析路径?

wmtdaxz3  于 2023-10-19  发布在  Webpack
关注(0)|答案(3)|浏览(104)

我正在使用Webpack和 sass-loadercss-loaderurl-loader 进行ReactJs项目。
我想不解决字体路径,并保持它到底是如何设置在SASS文件。

问题:

如果我调用一个绝对路径(即:http://fonts.com/my-font.eot/path/to/my-font.eot),则路径无法解析。
但是,如果我使用相对路径(即:my-font.eotpath/to/my-font.eot),url-loader 尝试解析路径。
在我的例子中,我需要使用相对路径(即使它会生成404错误)。

我尝试了:

我试图排除 url-loader 中的所有字体扩展名,但Webpack不知道如何处理这种类型的文件,即使该文件可能不存在。
这里我得到的错误:
模块解析失败:C:....\fonts\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"]
      },
      ...
    ]
  },
  ...
}
ddarikpa

ddarikpa1#

这个问题可能有点老了,但我还是想更正一下答案。
当你想使用数组语法时,你基本上为每个加载器定义了所有的选项。为了做到这一点,你必须在数组中为加载器使用一个对象。所以与其

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

},
vq8itlhq

vq8itlhq2#

我找到解决办法了。我没有正确添加 css-loader 选项。
因为我没有找到直接使用数组语法添加选项的方法,所以我不得不切换到字符串语法。
这段代码不起作用:

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

此代码工作:

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

92vpleto3#

我需要一个不同于公认的解决方案:

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

成功了在我的例子中,我想跳过解析一个我想通过调用后端来解析的路径,所以它必须保持这样,不应该被Webpack解析。
我从Webpack文档中找到了这个注解语法/* webpackIgnore: true */

[编辑]

当我尝试构建时,Webpack注解被postcss和cssnano剥离(我使用Vue),我不得不将其写成so the comment is preserved的形式,它也通过了构建:/*! /* webpackIgnore: true */

相关问题