Question

我有共享组件npm包项目，它暴露了组件和css文件。 Css文件是使用webpack和url / file-loader构建的，用于解析字体。我可以成功构建这个项目，结果css看起来像：

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

问题是当我尝试使用另一个使用webpack和css-loader并且css-modules打开的项目的css（modules：true）时，css-loader无法解析生成的url：

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

如果我将网址更改为：

url(./cf871bb3514694d3252ee1d23f71dd6c.woff2);

然后它有效。

此外，如果我设置modules:false，那么即使没有./

，一切也都有效

所以看起来css-loader打开css-modules需要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)
    })
  ]
};

css-loader无法解析file-loader生成的url

1 个答案: