如何让 sass 和字体模块适用于 Angular/Webpack 应用程序的单个功能?

Question

我的JHipster项目中遇到了糟糕的问题。我不确定我想做的事情是不可行的，还是我只是做错了什么。具体或一般性建议或实例将不胜感激。

我正在尝试将此仪表板演示作为一项功能添加到我的应用程序中。它使用几个 scss、css 和字体文件，这些文件在演示的.angular-cli.json文件中全局声明。我希望这些样式仅适用于此功能中的组件，而不是整个应用程序。如果可能的话，我希望这些样式和字体与延迟加载的功能的 javascript 代码一起延迟加载。

我对 sass 和 style 模块的理解是非常基本的。我的webpack.common.js也可能有问题。

对于现状，我收到许多看起来像这样的错误：

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/main/webapp/app/features/dashboard/dashboard.page.scss
Module not found: Error: Can't resolve '../fonts/ionicons.woff?v=2.0.1' in '/Users/Dan/work/gba/src/main/webapp/app/features/dashboard'
@ ./~/css-loader!./~/sass-loader/lib/loader.js!./src/main/webapp/app/features/dashboard/dashboard.page.scss 6:67172-67213
@ ./src/main/webapp/app/features/dashboard/dashboard.page.scss
@ ./src/main/webapp/app/features/dashboard/dashboard.page.ts
@ ./src/main/webapp/app/features/dashboard/dashboard.module.ts
@ ./src/main/webapp/app/features/features.routing.ts
@ ./src/main/webapp/app/features/features.module.ts
@ ./src/main/webapp/app/app.module.ts
@ ./src/main/webapp/app/app.main.ts
@ multi (webpack)-dev-server/client?http://localhost:9070 webpack/hot/dev-server ./src/main/webapp/app/app.main

Answer 1

我想通了。你需要把一些事情做好，否则它就行不通，要做到这一点，你必须了解一切。当我将我的 webpack 规则更改为输出具有原始名称而不是散列名称的模块(文件)时，突破就出现了。

// webpack.vendor.js
test: /.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
// originally
use: ['file-loader?hash=sha512&digest=hex&name=content/[hash].[ext]']
// preserving the file names.
// use: ['file-loader?name=content/[name].[ext]']

这向我显示了哪些文件实际上被复制到目标。字体真棒的那些正在工作。然后我看到在我的vendor.scss文件中设置了一个$fa-font-path变量，我研究了它的效果。我的代码没有引用这个变量，但在 node_modules/中的 font-awesome 文件中有一个对它的引用。在该文件中，此变量被赋予了一个默认(错误)值，该值被我的vendor.scss文件中的(良好)值覆盖。其他一些供应商库也有这样的变量，这些变量也收到了未被覆盖的错误默认值。一旦我向vendor.scss添加了行以覆盖这些默认值，它就开始工作了。

// vendor.scss
$fa-font-path: '~font-awesome/fonts';
$roboto-font-path: '~roboto-fontface/fonts';
$ionicons-font-path: "~ionicons/fonts";

最重要的是，我有webpack.common.js和webpack.vendor.js第三方库的构建说明。我不知道这是否重要。