获取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文件也复制到{{1} }}文件夹，所以路径引用是正确的。

Answer 2

可能的拼写错误：minetype mimetype文件测试应为woff。

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

我唯一的猜测（不知道关于Twitter引导程序的任何内容以及错误是否解决它）是你的正则表达式可能不匹配所以尝试类似：

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

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