web-dev-qa-db-ja.com

フォント-Bootstrap

BootstrapとFont-awesomeの単純な要求を実行しようとしていますwithWebpack。 Bootstrap CSSをロードできましたが、Font-awesomeが正しく機能していません。

これは私が結果として得るものです：

enter image description here

私のコードを以下に示します。私がここでしている間違ったことは何ですか？

リソース： Githubコード ここから入手できます。

package.json

{
  "name": "",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack -w"
  },
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "expose-loader": "^0.7.0",
    "file-loader": "^0.8.4",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "admin-lte": "^2.3.2",
    "bootstrap": "^3.3.5",
    "bootstrap-webpack": "0.0.5",
    "exports-loader": "^0.6.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "font-awesome": "^4.4.0",
    "font-awesome-webpack": "0.0.4",
    "imports-loader": "^0.6.5",
    "jquery": "^2.1.4",
    "less": "^2.5.3",
    "less-loader": "^2.2.1"
  }
}

エントリポイント：index.js

var $ = require('jquery');

require('expose?$!expose?jQuery!jquery');

require("bootstrap-webpack");
require('./node_modules/font-awesome/css/font-awesome.css');

require('./resources/css/style.css');


$('h1').html('<i class="fa fa-bars"></i> this is bootstrap');
console.log('hi there');

Webpack構成ファイルwebpack.config.js

module.exports = {

    entry: './index.js',
    output: {
        path: 'public/assets/',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [

            {test: /\.css$/, loader: "style!css!" },
            { test: /\.less$/, loader: "style!css!less!" },

            //bootstrap
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},

            //font-awesome
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }



        ]
    },

}
javascripttwitter-bootstrap-3font-awesomewebpackwebpack-style-loader
12
Ariful Haque

F12デバッグコンソールを確認し、特定のファイルのエラーに関するWebブラウザの詳細を確認してください。

Webサーバーが正しいmimeタイプの.woffファイルと.woff2ファイルを提供していないため、ブラウザークライアントの観点からはまったく読み込まれません。

.woffファイルのサポートを追加するには、Webサーバー側を変更する必要があります。たとえば、IIS Express in Web.configには、次のものが必要です。

  <system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>

そしてwebpack.config.js内には、次のようなモジュールローダーが必要です。

    {
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        loader: 'url-loader'
    }
7
Hrvoje Kusulja

私はこれが1年前の質問であることを知っていますが、誰かがGoogleからこれに行き着いた場合に備えて：

css-loaderが間違ったファイルパスを生成する からの既知の問題があります。これは本番ビルドでは発生しませんが、開発モードで正方形をレンダリングする場合は依然として厄介です。

この問題が修正されるまで、css-loaderソースマップを無効にして、開発中にフォントが正しくレンダリングされることを確認できます。 css?sourceMapを書き込むWebpack構成のどこかを見つけて、それをcssに変更します。

2
TrungDQ