twitter-bootstrap - 让 Bootstrap Glyphicons 与 Webpack 一起工作

Question

我正在尝试使用 webpack 加载 Bootstrap 。 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文件夹，所以路径引用是正确的。