react项目如何引入外部的样式，比如我们常常用到的bootstrap ，这篇我们将介绍如何使用外部的第三方的样式
我们在使用之前首先是需要安装bootstrap
如何安装：
我们可以看官网：
这里我们就来安装
cnpm install bootstrap@3 -D
安装好了之后，我们就要使用boostrap，首先我们要在项目引入bootstrap，我们来看安装的位置
通过cnpm 安装的模块都是在node_moudles 下面
那么我们在项目中导入，我们该如何的引用路径又该是什么
import bootcss from 'bootstrap/dist/css/bootstrap.css'
此处需要注意的是，我们在导入的时候，不仅仅没有引入事项项目的根路径 '@' 符号，而且前面也没有使用node_modules ,而是直接使用boostrap 和上面的bootstrap@3.4.1@boostrap文件夹 完全不同，那么这个bootstrap 是怎么实现的
你可以看做bootstrap 是从这个地方取出的，也可以看做是从bootstrap@3.4.1@boostrap 去掉版本号之后获取到的
那么现在我们已经导入到boostrap 如何使用，比如我们在页面上新建一个按钮
<br/><button className={[bootcss.btn,bootcss['btn-primary']].join(' ')}>按钮</button><Cmt></Cmt>
具体的效果：
此刻我们看到的是按钮使用的样式就是bootstrap 中的样式，但是我们发现的：
<button className={[bootcss.btn,bootcss['btn-primary']].join(' ')}>按钮</button>
这样似乎太麻烦了，我们还是希望和html 中的写法一样，如果能修改成为这样甚好：
<button className="btn,btn-primary">按钮</button>
上面是我们不进行模块化的书写的办法，尽然不进行模块化，编写的时候方便，那么就去掉模块化，当然 也不能全部的去掉，我们可以把自己写的css 文件导入的时候使用模块化，但是在导入其他第三方的css 文件的时候就不使用模块化，那么就需要我们自己创建的css 文件命名的时候就不能和第三方的一样，那我们就不使用css 结束，我们可以使用.scss 文件结尾
比如我们创建：
那么我们导入的时候当然后缀名也需要的修改：
import cssobj from '@/css/CommList.scss'
现在我们修改了后缀名，但是项目中如果不安装相关的loader 是没有办法将文件解析的
我们需要安装这样的两个文件：sass-loader node-sass
cnpm i sass-loader node-sass -D
按照我们以往的经验，我们一般都在安装完成之后修改webpack.config.js这个配置文件
{test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/},{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.scss$/,use:['style-loader',{loader:'css-loader',options:{modules:true}},'sass-loader']}
配置好了之后，我们需要修改第三方的导入的方式，原来模块化的时候导入：
import bootcss from 'bootstrap/dist/css/bootstrap.css'
既然不是模块化了，所有要修改为：
import'bootstrap/dist/css/bootstrap.css'
并且按钮的编写方法也应该变化：
<button className="btn btn-primary">按钮</button>
我们看效果：
总结一下：上面我们在项目中试图引入第三方的样式表比如bootstrap，安装导入之后，我们发现编写起来甚是麻烦，我们想简单化，所以我们就想办法将第三方的样式去除模块化，但是一旦针对css结尾的文件去除了模块化，我们发现自己的编写的css文件也去除了模块化，所以针对第三方和我们自己编写的css文件我们就必须的区分对待，也就是自己的文件还要保持模块化，那么我们的做法是将自己编写的css 文件重命名为scss ，这样导入的时候，针对scss文件我们就使用模块化，所有上面我们演示了如何导入第三方的插件
希望对你有所帮助！
