javascript - 使用错误的相对路径解析 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 团队或加载器的开发团队报告。