css-loader無法解析文件加載器生成的URL

Question

我有共享的組件npm軟件包項目，該項目公開了組件和css文件。 CSS文件是使用webpack和url / file-loader構建的，用於解析字體。 我可以成功構建該項目，並且最終的CSS如下所示：

@font-face {
  font-family: 'MyFont';
  src: url(cf871bb3514694d3252ee1d23f71dd6c.woff2);
}

問題是當我嘗試從另一個使用webpack和css-loader的項目中使用此css時，css-modules已打開（modules：true），css-loader無法解析生成的url：

Module not found: Error: Can't resolve 'cf871bb3514694d3252ee1d23f71dd6c.woff2'

如果我將網址更改為：

url(./cf871bb3514694d3252ee1d23f71dd6c.woff2);

然后就可以了。

另外，如果我設置modules:false那么即使沒有./正常工作

因此，看起來像已打開css-modules的css-loader希望url路徑作為帶有./的節點相對路徑，而不僅僅是文件名。

源文件中的url看起來像：

url('../assets/fonts/Myfont.woff2');

有辦法解決嗎？

Answer 1

看來您通常無法在webpack中禁用Node.js樣式的解析。 但是，您可以使用NormalModuleReplacementPlugin干預模塊請求，並像相對路徑一樣動態地解決它們。

以下webpack配置調整應該可以解決問題：

const webpack = require('webpack')
const path = require('path')

module.exports = {
  //...
  plugins: [
    // RegEx matches all requests neither starting with a dot nor a slash
    new webpack.NormalModuleReplacementPlugin(/^[^./]/, resource => {
      // Override the original request
      resource.request = path.resolve(resource.context, resource.request)
    })
  ]
};