webpack 如何引用npm 下载的bootstrap 里的js 和 css?

Question

是这样的：
我的项目是用webpack来构建的，现在项目中想要使用bootstrap来实现，我该怎么引入啊？

看到网上一些帖子说，直接 require("bootstrap"); 可是这样不行啊,只引用了js
另外，我还要对bootstrap进行less编译，实现定制化，这怎么弄呢？

我觉得，应该不是我先进入node_modules下的bootstrap,进行grunt编译，然后再把生成的css和js拷贝到我项目的源码文件夹里啊？
这么复杂。。应该就没人用了吧。。。

求助求助。。前端妹子真的快被逼哭了。。头好晕T_T

Answer 1

不知道题主的问题解决了吗，如果有解决是用的什么办法呢？
我也遇到同样的问题，我找到bootstrap-loader这个包，发现可以用。通过安装这个包能够引入bootstrap的css和js文件，当然也需要稍微配置下svg和font的loader（我用的是webpack），安装其间有自动地调用c++编译器编译，等待时间比一般的包稍微长一点.

但是直接按bootstrap-loader的readme配置，jquery还是有点问题，可以全局声明并放到入口文件中(参考这里)：

global.jQuery = require('jquery');

另外贴一下我的webpack.config.js:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [

            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
        ]
    }
};

Answer 2

你打开node_modules目录里面的bootstrap，找到要引入的css文件，假如是bootstrap/dist/bootstrap.css
那么你引入的方式是

require("bootstrap/dist/bootstrap.css")

然后webpack要配置css的加载器

Answer 3

贴一下你的 webpack 配置

Answer 4

webpack提供有bootstrap-loader