获取Bootstrap Glyphicons以使用Webpack

Question

我正在尝试使用webpack加载引导程序.css工作得很好,但是字形似乎通过显示正方形来破坏(见下文).没有控制台错误

module.exports = {
    entry: "./public/app/main.js",
    output: {
        path: __dirname + '/public/dist/',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { 
                test: /\.css$/,
                loader: "style-loader!css-loader" 
            },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            { 
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { 
                test: /\.(ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=application/octet-stream" 
            },
            { 
                test: /\.(eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "file" 
            },
            { 
                test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=image/svg+xml" 
            },

        ]
    },
    node: {
        fs: "empty"
    }
};

<i class="done-icon glyphicon glyphicon-ok"></i>

Answer 1

试试这个:

loaders: [
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  },
  {
    test: /\.png$/,
    loader: 'url-loader?limit=100000'
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?|(jpg|gif)$/,
    loader: 'file-loader'
  }
]

和你的javascript(假设npm和模块):

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

只是提醒webpack将字体文件放在与您的bundle.js文件相同的目录中,因此您可能需要确保您的index.html文件也被复制到您的dist文件夹,以便路径引用正确.

Answer 2

可能的拼写错误：minetype应该用于mimetype您的woff文件测试。

另外 mimetype 是从扩展名推断出来的，我不确定您是否需要提供它。

我唯一的猜测（不知道任何有关 Twitter 引导程序的信息，并且如果拼写错误无法解决它）是您的正则表达式可能不匹配，因此请尝试以下操作：

/\.(svg|woff|ttf|eot)(\?v=.*)?$/i

我认为这可能是一种更宽容的测试，并且允许您使用一个测试而不是多个测试。