在webpack中怎么使用bootstrap

Question

var React = require('react')
var ReactDom = require('react-dom')

var Textinput = React.createClass({
    getInitialState : function () {
        return {
            value : 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](http://freecodecamp.com/hermanfassett)*'
        }
    },
    render : function () {
        return (
            <div className="row" style={{marginTop: 30 + "px"}}>
                <div className="col-sm-5 col-sm-offset-1">
                    <textarea className="form-control" rows="26" style= {{resize: "none"}} defaultValue={this.state.value}></textarea>
                </div>
            </div>
        )
    }
})

ReactDom.render(<Textinput/>,document.getElementById("container"))

我想让我的组件使用bootstrap样式。但是应该怎么引入呢？
需要在webpack中配置什么东西吗？或者还是说要npm install bootstrap？

Answer 1

谢邀~

传送门:http://v3.bootcss.com/getting...

Answer 2

我用的是react-bootstrap
https://react-bootstrap.githu...

这个是网址，你可以看看，估计都差不多。上面有get－start 按照上面的安装好包就可以用了

Answer 3

只要bootstrap样式的话，你把它的css打包进来就ok了啦。
另外，如果要自定义bootstrap样式的各种变量的话，可以参考我这篇文章《webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap》

Answer 4

可以先npm install bootstrap --save，这样装起来方便项目移植。当然你也可以直接下载Bootstrap的CSS文件。

如果只是导入CSS的话，比较简单，方法如下

1. 如果是通过npm下载的bootstrap，导入方法是在main.js里加入类似import 'bootstrap/dist/css/bootstrap.css'的代码。

2. 如果是自己下载的Bootstrap CSS文件，导入方法和上面类似，但是import后面的路径改成你的CSS的实际路径

如果是导入JS的话，由于Bootstrap的JS依赖jQuery，所以需要对jQuery做配置，具体方法参见我在另一个问题里的回答。