CODEWITHSUNDEEP
twitter-bootstrapwebpack
Toli
Toli

Reputation: 5777

Getting Bootstrap Glyphicons to work with Webpack

I'm trying to load up bootstrap using webpack. The css works just fine, but the glyphicons seem to break by showing a square (see below). No console errors

enter image description here

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>

Upvotes: 5

Views: 9648

Answers (2)

icfantv
icfantv

Reputation: 4643

Try this:

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'
  }
]

and your javascript (assuming npm and modules):

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

Just a heads up that webpack is going to put the font files in the same directory as your bundle.js file so you may need to ensure that your index.html file is also copied to your dist folder so the path references are correct.

Upvotes: 8

Matt Derrick
Matt Derrick

Reputation: 5724

Possible typo: minetype should be mimetype for your woff file test.

Also mimetype is inferred from the extension I'm not sure you need to provide it.

My only guess (without knowing anything about Twitter bootstrap and if the typo does not solve it) is that your regexes might not be matching so try something like:

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

Which I think is probably a more forgiving test and allows you to use one test instead of many.

Upvotes: 1

Related Questions