7

在 Angular2 应用程序中，我在 webpack 配置中有一个文件加载器设置，如下所示：

  {
    test: /\.(eot|svg|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file?name=/assets/fonts/[name].[ext]'
  }

我在配置的其他地方也有这个：

modulesDirectories: ['node_modules']

据我了解，文件加载器在 node_modules 文件夹中搜索与给定表达式匹配的任何文件（在本例中为字体文件），并将它们复制到/assets/fonts构建输出中的文件夹中。但是，这确实有效，因为实际上没有文件被复制到目标文件夹。我错过了什么？

附带说明一下，我还想知道如何处理冲突，因为node_modules多个包中可能有同名的文件。

更多信息： vendor.scss文件包括以下内容： $zmdi-font-path: "assets/fonts"; @import "~material-design-iconic-font/scss/material-design-iconic-font.scss";

sass-loader 最终应用它来生成以下 css：

@font-face {
font-family: 'Material';
src:url('assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'),url('assets/fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'),url('assets/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0}') format('truetype');
font-weight: normal;
font-style: normal;
}

上述两个步骤将导致浏览器向位于assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0. 显然，直到运行时才会发生这种情况。我require将文件放在哪里以便在构建时将其复制到资产/字体？

我也在sass-loader管道中使用：{ test: /.scss$/, loaders: ['raw-loader', 'sass-loader'] }

并将 sass 包含在我的组件中，如下所示：

styleUrls: [
'./../assets/scss/main.scss'
]

从浏览器看，我可以看到 CSS 包含在 HTML 中，但对字体的调用返回 404。

4

1 回答 1

9

它的工作方式有点不同：

它不会简单地复制与测试正则表达式匹配的所有文件。它将复制与正则表达式匹配的所有必需文件。这意味着在您的代码中的某处，您必须需要一个加载字体的 css 文件（或 sass 或更少）。然后，Webpack 将确保将字体复制到您的资产文件夹中。

注意，你可以把/前面的/assets/fonts/....

编辑vendor.scss确保在您的 js 中应用程序开头的某处 需要您的 sass 文件。

例子

require('./path-to-vendor/vendor.scss');

然后，Webpack 将加载文件并为您准备任何依赖项。在 js 中要求你的 sass 看起来很奇怪，但这就是它的工作原理。:)

于 2016-08-24T15:09:42.533 回答