3

Angular2 beta.15 と webpack 1.12.14 を使用しています。

app.component.tsこのようなグローバル パターンとして、1 つの .css ファイルと 1 つの .scss ファイルがあります。

  @Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styles: [
      require('../stylesheets/css/main.min.css'),
      require('../sass/example.scss')
    ],
    encapsulation: ViewEncapsulation.None,
  })

そして、.cssファイル内で、以下のようにいくつかのフォントがインポートされます。

@font-face {
    font-family: 'Helvetica Neue';
    src: url(fonts/light/helvetica-neue-light.eot) format("eot"), 
         url(fonts/light/helvetica-neue-light.woff2) format("woff2"),   
         url(fonts/light/helvetica-neue-light.woff) format("woff"), 
         url(fonts/light/helvetica-neue-light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

には、以下のような、、およびフォントのwebpack.config.jsローダーがあります.css.scss

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
  },
  {
       test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
       loader: 'url-loader'
  },
  {
    test: /\.css$/,
    loaders: ['style', 'css']
  },

を実行したときwebpack -display-error-detailsはまったくエラーはありませんが、サーバーを起動してアプリを実行すると、次のようなエラーが発生しました

EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.
ORIGINAL EXCEPTION: Expected 'styles' to be an array of string

CSSローダーを次のように変更すると

  {
    test: /\.css$/,
    loader: 'url-loader'  //or use 'raw-loader'
  },

これらの例外はなくなり、アプリは起動しましたが、ブラウザーのコンソールでこれらのフォントに対して 404 要求エラーが発生し、まったく読み込まれていません。それで、私にいくつかの指針を教えてもらえますか？ローダーの設定に問題があると思われます。

4

3 に答える 3

1

複数のローダーをチェーンすると、アクションの順序は右から左に完了します。

次に、ローダーからの結果のコードが次のローダーに渡されます。この場合、raw-loaderand をurl-loader次のように連鎖させて、目的の結果を得る必要があります。

loaders: ['raw-loader', 'url-loader']

最初に、スタイルでエンコードされた base64 に自動的に変換されるフォント URL を取得する必要があるため、最初url-loaderにチェーンを呼び出す必要があります。次に、このファイルを module.exports としてインポートしようとしているので、 を呼び出しますraw-loader。

したがって、チェーンでは次のことが起こります。

  1. url-loader: 静的アセットへのすべての URL 参照を に変換しますbase64:data。
  2. raw-loader: ファイルを取得し、そのコード全体を文字列でラップしてから、追加してインポート可能にしますmodule.exports='string'
于 2016-04-24T03:35:52.220 に答える
0 
        Just Try once to keep under one dir both font and css

        // and give the reference onces in webpack.config.rb

         # Set this to the root of your project when deployed:
         http_path = "/"
         css_dir = "app/assets/css"
         sass_dir = "app/assets/sass"
于 2016-04-22T05:00:51.637 に答える