resolve-url-loader 使用错误的相对路径

Question

我有一个使用 Webpack 编译的 Typescript 应用程序。 这是我的 scss 文件的加载方式：

{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},

这是我的字体的加载方式：

{
   test: /\.woff(2)?(\?v=.+)?$/,
   use: 'url-loader?limit=10000&mimetype=application/font-woff'
},

{
   test: /\.(ttf|eot|svg)(\?v=.+)?$/,
   use: 'file-loader'
},

然后我有一个文件app.scss 有这行：

@import "~primeng/resources/themes/omega/theme.scss";

在node_modules 的一个名为theme.scss 的文件中，有一个字体导入：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

但是当我编译时出现错误：

`Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.eot'
in 'path_to_project/src/app'`

所以看来问题在于 Webpack 查找相对于 app.scss 的字体，而不是相对于导入的 theme.scss 查找它。这是resolve-url-loader 应该解决的问题。你看我已经为 scss 文件配置了resolve-url-loader。那么有什么问题呢？

Answer 1

我解决了我的问题，但这不是故事的结局，因为我收到的错误消息似乎具有误导性。这非常令人毛骨悚然，并且妨碍了调试。 实际上我有两个问题，都导致了同样的错误信息：

• 一些 scss 文件使用了 roboto font-family 但根本没有定义它。

• 一个文件有@padding-left: 0 而不是padding-left: 0。是的，这不知何故导致 Webpack 找不到字体。

这些问题需要进一步调查。当我有更多空闲时间时，我会回到它。

更新：

好的。让我们来看看。自从我遇到这个问题以来已经过去了两个月，我的代码发生了很大变化。但还是。我将带有这个邪恶@ 字符的@padding-right: 0; 行添加到与2 个月前完全相同的位置。瞧，Webpack 报告了一条错误消息，据说它无法解析某种字体。事实上，SCSS 中的致命语法错误可能会引发关于未解决无关字体的误导性错误消息。我删除了这条线，字体很容易解决。 也许应该报告给 Webpack 团队或 loader 的开发团队。