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团队或加载器的开发团队报告。

使用错误的相对路径

1 个答案: