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

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

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

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

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

贴一下你的 webpack 配置

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

require"bootstrap/dist/bootstrap.css"

然后webpack要配置css的加载器

webpack提供有bootstrap-loader

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

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

global.jQuery = requirejquery;

另外贴一下我的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" } ] }
};

发表评论

电子邮件地址不会被公开。 必填项已用*标注