React-项目-引入外部的样式（14）

柔光的暖阳◎ 2022-09-04 13:47 173阅读 0赞

react项目如何引入外部的样式，比如我们常常用到的bootstrap ，这篇我们将介绍如何使用外部的第三方的样式

我们在使用之前首先是需要安装bootstrap

如何安装：

我们可以看官网：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

这里我们就来安装

cnpm install bootstrap@3 -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

安装好了之后，我们就要使用boostrap，首先我们要在项目引入bootstrap，我们来看安装的位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

通过cnpm 安装的模块都是在node\_moudles 下面

那么我们在项目中导入，我们该如何的引用路径又该是什么

import bootcss from 'bootstrap/dist/css/bootstrap.css'

此处需要注意的是，我们在导入的时候，不仅仅没有引入事项项目的根路径 '@' 符号，而且前面也没有使用node\_modules ,而是直接使用boostrap 和上面的bootstrap@3.4.1@boostrap文件夹 完全不同，那么这个bootstrap 是怎么实现的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

你可以看做bootstrap 是从这个地方取出的，也可以看做是从bootstrap@3.4.1@boostrap 去掉版本号之后获取到的

那么现在我们已经导入到boostrap 如何使用，比如我们在页面上新建一个按钮

具体的效果：

![20210814163442425.png][]

此刻我们看到的是按钮使用的样式就是bootstrap 中的样式，但是我们发现的：

这样似乎太麻烦了，我们还是希望和html 中的写法一样，如果能修改成为这样甚好：

上面是我们不进行模块化的书写的办法，尽然不进行模块化，编写的时候方便，那么就去掉模块化，当然 也不能全部的去掉，我们可以把自己写的css 文件导入的时候使用模块化，但是在导入其他第三方的css 文件的时候就不使用模块化，那么就需要我们自己创建的css 文件命名的时候就不能和第三方的一样，那我们就不使用css 结束，我们可以使用.scss 文件结尾

比如我们创建：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

那么我们导入的时候当然后缀名也需要的修改：

import cssobj from '@/css/CommList.scss'

现在我们修改了后缀名，但是项目中如果不安装相关的loader 是没有办法将文件解析的

我们需要安装这样的两个文件：sass-loader  node-sass

cnpm i sass-loader node-sass -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

按照我们以往的经验，我们一般都在安装完成之后修改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'

并且按钮的编写方法也应该变化：

我们看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6][]

总结一下：上面我们在项目中试图引入第三方的样式表比如bootstrap，安装导入之后，我们发现编写起来甚是麻烦，我们想简单化，所以我们就想办法将第三方的样式去除模块化，但是一旦针对css结尾的文件去除了模块化，我们发现自己的编写的css文件也去除了模块化，所以针对第三方和我们自己编写的css文件我们就必须的区分对待，也就是自己的文件还要保持模块化，那么我们的做法是将自己编写的css 文件重命名为scss ，这样导入的时候，针对scss文件我们就使用模块化，所有上面我们演示了如何导入第三方的插件

希望对你有所帮助！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/8dfdf95c2e974e5eb5fbd11df91c2d3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/dc65d87c366d43ff8d2afd9acebfac8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/1da93348f4a74113a36a079b1bd610c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/380561e6a06c4326be6edca80d58a680.png
[20210814163442425.png]: /images/20220829/bda23724250546e3b53acdde37172f6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/5e2ad0cd7b424252889db296622ddc97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/96fe21bc73aa4f7dbc7f0634d8719b38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6]: /images/20220829/619de2ee01b746b793120e51dc644924.png