如何让scss / sass / css-loader无法解析url调用?(WebPack内部)

m1m5dgzv  于 2024-01-08  发布在  Webpack
关注(0)|答案(2)|浏览(136)

我在SCSS文件中有几个对url(some-path)的调用,css-loader坚持将这些URL解析为它所知道的内容。这些包含的文件在服务器/Web上可用,但对WebPack不可见。我如何让它只接受字符串?
在我的scss文件中,我有一个font-face,例如:

@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: 'Noto Serif';
    src: url($font-path + 'NotoSerif-Regular.ttf');
}

字符串
我得到一个错误:
Error: Can't resolve '/static/fonts/NotoSerif-Regular.ttf'
我只是想让它发出这个字符串,而不试图解析它。我的WebPack文件中没有规则告诉它包含TTF文件。我最近升级了sass/css/loader节点模块;在它工作之前。
我不知道这个错误是来自WebPack还是Sass。

i5desfxk

i5desfxk1#

css-loader中有一个设置可以禁用URL解析:

// Translates CSS into CommonJS
                loader: 'css-loader',
                options: {
                    url: false,
                },

字符串
其中一个版本升级必须将其默认值更改为true,使其向后不兼容。

9ceoxa92

9ceoxa922#

我在我的webpack.config.js中添加了以下内容,以便从webpack解析中排除一些URL:

{
  loader: 'css-loader',
  options: {
    url: {
      filter: (url, resourcePath) => {
        if (url.indexOf("/fonts/")==0) {
          return false;
        }
        return true;
      },
    }
  }
}

字符串

相关问题