Can't use bootstrap with webpack

Question

Using Express, Webpack and Bootstrap. I'm using css-loader for stylesheets. Here's my webpack.config.js:

const path = require("path");

config = {
    "entry": "./modules/entry.js",
    "output": {
        "path": path.resolve(__dirname, "public"),
        "filename": "bundle.js"
    },
    "module": {
        "rules": [
            { "test": /\.css$/, "use": "css-loader"}
        ]
    }
}

module.exports = config

Entry.js only requires the stylesheets:

require("bootstrap")
require("glyphicons")

I put all these files in my public folder which I serve using app.use(express.static("public"))

And in my index.html I have a script tag:

<script src="./public/bundle.js" type="text/javascript">

Using bootstrap classes (or glyphicons) on my html does nothing.

score 1 · Answer 1 · answered Sep 30 '17 at 19:46

1

Try this for using bootstrap with webpack

https://github.com/shakacode/bootstrap-loader

answered Sep 30 '17 at 19:46

Madhav Chaturvedi

573
5
14

score 1 · Answer 2 · answered Sep 30 '17 at 19:47

The require('bootstrap') will only import javascript in your case, to import CSS you need to use require('bootstrap/dist/css/bootstrap.min.css'), or in case of using non-compiled bootstrap version, you'll need more loaders.

You can find more info and configuration sample at official documentation page here

Can't use bootstrap with webpack

2 Answers2