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

【问题标题】：css-loader can not resolve urls generated by file-loadercss-loader 无法解析 file-loader 生成的 url
【发布时间】：2018-06-12 17:43:18
【问题描述】：

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

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

问题是当我尝试从另一个项目中使用这个 css，该项目使用 webpack 和 css-loader 并打开 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');

有办法解决吗？

【问题讨论】：

标签： javascript css webpack css-loader css-modules

【解决方案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)
    })
  ]
};

【讨论】：