Angular/Webpackアプリケーションの単一の機能に対して、Sassおよびフォントモジュールを動作させるにはどうすればよいですか？

Question

私のJHipsterプロジェクトでは問題があります。私がやりたいことがやり遂げられないのか、あるいは私が何か間違っているだけなのかどうかは分かりません。特定の、または一般的なアドバイス、または例をいただければ幸いです。

をフィーチャーとしてmy appに追加しようとしています。これは、デモの.angular-cli.jsonファイルでグローバルに宣言されているいくつかのscss、css、およびfontファイルを使用します。これらのスタイルは、アプリケーション全体ではなく、この機能内のコンポーネントにのみ適用したいと思います。可能であれば、これらのスタイルとフォントを遅延のロードと、機能のJavaScriptコードdoes load lazilyと一緒に使用したいと思います。

サスとスタイルモジュールの両方を理解することは非常に基本的です。おそらく私の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]'] 

これは、どのファイルが実際にターゲットにコピーされたかを示しています。フォントの素晴らしいものがうまくいきました。それから私は$fa-font-path変数が私のvendor.scssファイルに設定されているのを見て、その影響を調べました。私のコードはこの変数を参照していませんでしたが、node_modules /のフォントの素晴らしいファイルの内部に参照がありました。そのファイルでは、この変数には、私の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の両方でサードパーティのライブラリのための指示を構築しました。私はそれが重要かどうかわからない。