React 项目----className 样式 （13）

在上一篇的博客中，我们介绍了react中的style 内联的样式

https://blog.csdn.net/datouniao1/article/details/119569890

但是我们仔细的观察，这样编写样式，着实有点麻烦，我们习惯于平时使用的css 文件导入相关的样式，然后class 等于某一个值。那么应该如何来实现这一功能

首先我们在src 文件夹下面新建一个文件夹 css ，我们写的css的文件到放到这个文件夹下面

 我们之前使用的是一个评论的列表的实例，这个地方我们继续来完成，那么之前我们把css 的相关的样式都写成了变量，并且存在到了一个css.js 的文件中，现在我们在src/css/文件夹下面新建一个CommList.css 文件

内容如下：

.title{ 
    color:red;
    font-size: 1.5rem;
   text-align: center;
}
.mydiv{
    padding-left:10px;
    border:2px solid #ccc;
    margin-bottom:10px
}
.cmtuser{
    font-size:1.0rem;
    color:blue
} 

 那么我们的css 是独立的，那么肯定要在使用的地方引入.css 文件，所以在index 中需要导入CommList.css

如下：

webpack.config.js 这个配置文件：

 项目并不知道.css 文件到底是什么东西，该如何解析，随意我们安装一些模块能解析css 文件

安装style-loader,css-loader

cnpm i style-loader css-loader -D

配置rules：

......   
 module:{
       rules:[
          {test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/},
          {test:/\.css$/,use:['style-loader','css-loader']}
       ]
    },
......

 然后重新启动项目：npm run dev

启动之后，我们如何引入这些样式：

 因为class 是关键字，所以我们采用className 来引用样式，效果如下：

 总结：上面我们介绍了React 如何来使用外部的css 文件，并且在使用的时候用className

这个关键字，需要安装style-loader 和css-loader 

当然，有的时候我们配置为了解决作用于的问题，常常在配置css-loader的时候增加一个参数：

我们把css-loader 的配置修改成为了：

 {test:/\.css$/,use:['style-loader',{loader:'css-loader',options:{modules:true}}]}

这个是启用css 的模块化，那么这样的配置有什么样的作用呢，这个是将我们导入的css 转换为一个对象，通过这个对象可以将文件中定义的样式点出来

我们打印看一下：

import cssobj from '@/css/CommList.css'
console.log(cssobj);

 我们看一下控制台输出的效果：

这样我们比如要使用title的样式可以将代码修改为如下：

        return <div>
        <h1 className={cssobj.title}>下面是评论列表</h1>
           {
               this.state.commentList.map((item,index)=>{
                return <div key={item.id} className={cssobj.mydiv}>
                        <h1 className={cssobj.cmtuser}>评论人： {item.user}</h1>
                        <p>评论内容： {item.content}</p>
                      </div>
               })
           }
        </div>

 效果如下：

 以上我们看到了如何在项目中引入相关的css文件，以及启动css 文件的模块化的功能

希望对你有所帮助